在百度上搜了很多方法去修改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进度条的更多相关文章

  1. bootstrap3的 progress 进度条

    : 2.3版               3.0版 .bar .progress-bar .bar-* .progress-bar-* 2.代码: <!DOCTYPE html PUBLIC & ...

  2. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  3. 微信小程序 progress 进度条 内部圆角及内部条渐变色

    微信小程序progress进度条内部圆角及渐变色 <view class="progress-box"> <progress percent="80&q ...

  4. android中progress进度条的使用

    activity.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  5. progress 进度条

      进度条.  属性名 类型 默认值 说明 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Numb ...

  6. progress进度条的样式修改

    由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番. 现在总结一下. progress是H5新标签,主要用于显示进度条.由于他 ...

  7. div实现圆环进度条

    <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title ...

  8. [Cocos2d-x For WP8]Progress 进度条

    Cocos2d-x可以有多种进度条的展示方式,进度条的种类是根据进度条运动的方向来区分,包括顺时针,逆时针,从左到右,从右到左,从下到上和从上到下6种方式,这和WP8的进度条是由很大的区别的.那么Co ...

  9. js jq 实现鼠标经过div背景以进度条方式 变宽,鼠标离开变小,同时文字颜色和原来不一样

    <!DOCTYPE html> <html> <head> <title></title> <script typet="t ...

随机推荐

  1. 机器学习 (二) 多变量线性回归 Linear Regression with Multiple Variables

    文章内容均来自斯坦福大学的Andrew Ng教授讲解的Machine Learning课程,本文是针对该课程的个人学习笔记,如有疏漏,请以原课程所讲述内容为准.感谢博主Rachel Zhang 的个人 ...

  2. HDU 4757 Tree(可持久化字典树)(2013 ACM/ICPC Asia Regional Nanjing Online)

    Problem Description   Zero and One are good friends who always have fun with each other. This time, ...

  3. LTE 中基于X2的切换

    LTE 中基于X2的切换 (36.300, 23.401)SGW  保持不变 http://blog.sina.com.cn/s/blog_673b30dd0100j4pe.html   1:eNod ...

  4. Android中有哪些好的开发框架?

    在安卓开发中,框架的使用必不可少,合理利用一些好的开发框架,往往可以达到事半功倍的效果.本文小编就将和大家分享安卓开发者不得不知的5款框架,一起来看看吧,新技能get走起~~ 1.thinkAndro ...

  5. BZOJ4327 JSOI2012玄武密码(AC自动机)

    当然可以在SA上二分答案,但看起来会被卡log.考虑对模板串建出AC自动机,用母串在上面跑,标记上所有能到达的点.注意到达某个点时需要标记所有其通过fail指针可以走到的点,如果遇到一个标记过的点就可 ...

  6. P1531 I Hate It

    题目背景 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 题目描述 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师的 ...

  7. [POI2011]Lightning Conductor

    题面在这里 description 已知一个长度为\(n\)的序列\(a_1,a_2,...,a_n\). 对于每个\(1\le i\le n\),找到最小的非负整数\(p\), 满足对于任意的\(1 ...

  8. 洛谷 P2218 [HAOI2007]覆盖问题 解题报告

    P2218 [HAOI2007]覆盖问题 题目描述 某人在山上种了\(N\)棵小树苗.冬天来了,温度急速下降,小树苗脆弱得不堪一击,于是树主人想用一些塑料薄膜把这些小树遮盖起来,经过一番长久的思考,他 ...

  9. 如何使用Photoshop制作真实的尺子

    前言: 日常生活中经常性的偶尔需要测量一些东西的尺寸,但刚好手头上缺乏尺子等必要的测量工具,这时候其实我们可以利用Photoshop,临时制作一把基于现实物理单位(如:厘米)的虚拟尺子. 难点: 像素 ...

  10. [hdu 3949]线性基+高斯消元

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3949 一开始给做出来的线性基wa了很久,最后加了一步高斯消元就过了. 之所以可以这样做,证明如下. 首 ...