使用div实现progress进度条
在百度上搜了很多方法去修改HTML5 progress的样式,然而并没有实现。
所以自己用div实现了一个。
简单粗暴(*^-^*) 可以在CSS里改样式,可以JS里改进度。

<div class="timepro">
<div class="timepro-go" style="width:10%"></div>
</div>
.timepro{
height:5px;
background:#ccc;
width:95%;
border-radius:10px;
-webkit-border-radius:10px;
position: relative;
}
.timepro-go{
width:0%;
background:#000;
height:5px;
border-radius:10px;
-webkit-border-radius:10px;
position: relative;
transition: all 10s;
-webkit-transition: all 10s;
}
使用div实现progress进度条的更多相关文章
- bootstrap3的 progress 进度条
: 2.3版 3.0版 .bar .progress-bar .bar-* .progress-bar-* 2.代码: <!DOCTYPE html PUBLIC & ...
- 微信小程序组件解读和分析:六、progress进度条
progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...
- 微信小程序 progress 进度条 内部圆角及内部条渐变色
微信小程序progress进度条内部圆角及渐变色 <view class="progress-box"> <progress percent="80&q ...
- android中progress进度条的使用
activity.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- progress 进度条
进度条. 属性名 类型 默认值 说明 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Numb ...
- progress进度条的样式修改
由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番. 现在总结一下. progress是H5新标签,主要用于显示进度条.由于他 ...
- div实现圆环进度条
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title ...
- [Cocos2d-x For WP8]Progress 进度条
Cocos2d-x可以有多种进度条的展示方式,进度条的种类是根据进度条运动的方向来区分,包括顺时针,逆时针,从左到右,从右到左,从下到上和从上到下6种方式,这和WP8的进度条是由很大的区别的.那么Co ...
- js jq 实现鼠标经过div背景以进度条方式 变宽,鼠标离开变小,同时文字颜色和原来不一样
<!DOCTYPE html> <html> <head> <title></title> <script typet="t ...
随机推荐
- remix无法安装的解决方案
无法安装的原因: 因为remix依赖python 执行python又依赖c++的环境 所以连环导致出错 https://github.com/nodejs/node-gyp 措施一:降级处理 先清理缓 ...
- term "JavaScript"
在Web浏览器上下文中理解的总称“JavaScript”包含几个非常不同的元素. 其中一个是核心语言(ECMAScript),另一个是Web API的集合,包括DOM(文档对象模型) JavaScri ...
- POJ 2186 Popular Cows(强联通+缩点)
Description Every cow's dream is to become the most popular cow in the herd. In a herd of N (1 <= ...
- c# log
public static void WriteMsg(string logName, string msg) { try { //string path = Path.Combine(". ...
- java的命名空间
这个package me.gacl.websocket相当于.net中的namespace命名空间. import 相当于.net中的using,引用命名空间:
- JAVA-I/O流任务
作业地址 5. Scanner基本概念组装对象 编写public static List readStudents(String fileName)从fileName指定的文本文件中读取所有学生,并将 ...
- 【转】cocos2dx 3.x 集成protobuf
http://www.cnblogs.com/chevin/p/6001872.html vs2013+cocos2dx 3.13.1 这篇博文是集成Lua版本的protobuf,集成C++版本的过程 ...
- 从零开始配置Jenkins(三)——用户权限管理
背景 最近项目管理中需要对jenkins的权限进行区分和限定,就研究了一下下.顺道把用户和权限这块的内容分享给大家. 用户 要想创建用户,需要先设定允许用户注册. 在系统设置,Configure Gl ...
- float与定位的区别
float和绝对定位的区别 CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位.1 需要注意的是,使用float脱离文档流时,其他盒子 ...
- P1338 末日的传说
题目描述 只要是参加jsoi活动的同学一定都听说过Hanoi塔的传说:三根柱子上的金片每天被移动一次,当所有的金片都被移完之后,世界末日也就随之降临了. 在古老东方的幻想乡,人们都采用一种奇特的方式记 ...