使用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 ...
随机推荐
- python基础训练营05
任务五 时长:2天 1.file a.打开文件方式(读写两种方式) b.文件对象的操作方法 c.学习对excel及csv文件进行操作 2.os模块 3.datetime模块 4.类和对象 5.正则表达 ...
- LeetCode 3——无重复字符的最长子串
1. 题目 2. 解答 2.1. 方法一 我们从前往后遍历字符串,start 代表最长子串的起始位置,一开始设置为零. 如果没有遇到重复字符,则更新子串的长度,向后遍历. 如果遇到重复字符时,则更新字 ...
- LeetCode 19——删除链表的倒数第 N 个节点
1. 题目 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后 ...
- MySQL统计数据库表大小
use information_schema; SELECT TABLE_NAME, (DATA_LENGTH/1024/1024) as DataM , (INDEX_LENGTH/1024/102 ...
- eclipse mylyn.tasks.ui
sudo rm workspace/.metadata/.lock ./Applications/eclipse/Eclipse.app/Contents/MacOS/eclipse -clean - ...
- JAVA第八周课堂笔记
- hdu 1053 Entropy (哈夫曼树)
Entropy Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- 51nod 1851俄罗斯方块(trick)
题目大意:给出一个黑白图,你可以选定一个俄罗斯方块的区域,黑白翻转,问能否变成白图 比较trick的题目, 首先可以想到,奇数个1肯定是无解的,所以考虑偶数个1 可以先讨论n是2的情况 当n为2时,其 ...
- 【题解】JLOI2015战争调度
搜索+状压+DP. 注意到一个性质:考虑一棵以x为根的子树,在x到原树的根的路径上的点如果都已经确定了方案,那么x的左右儿子的决策就彼此独立,互不影响了.所以我们考虑状压一条路径上每一层节点的状态,求 ...
- 斜率dp+cdq分治
写在前面 这个东西应该是一个非常重要的套路......所以我觉得必须写点什么记录一下,免得自己忘掉了 一直以来我的斜率dp都掌握的不算很好......也很少主动地在比赛里想到 写这个的契机是noi.a ...