在百度上搜了很多方法去修改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. Cassandra - Insert after Delete fails silently

    在delete一条数据后,再insert 相同内容的数据,结果看起来是成功的,但是当你去查找这个数据,却没有任何内容,整个过程并且没有任何异常提示. 这往往发生在单元测试的时候,我们反复清理和写入数据 ...

  2. Python模块学习:logging 日志记录

    原文出处: DarkBull    许多应用程序中都会有日志模块,用于记录系统在运行过程中的一些关键信息,以便于对系统的运行状况进行跟踪.在.NET平台中,有非常著名的第三方开源日志组件log4net ...

  3. ExtJS新手学习中常见问题

    1.常常出现运行之后不出现应该出现的效果. 这种情况一般是引用ExtJS路径不正确,要确保路径正确. 示例: <!DOCTYPE html> <html lang="en& ...

  4. (转)Loadrunner监控Linux的17个指标

    1.Average load:Average number of processes simultaneously in Ready state during the last minute.   上 ...

  5. MYSQL 服务无法启动,错误日志:InnoDB: .\ibdata1 must be writable

    这几天安装MYSQL 5.7版本的时候,出现了服务无法启动的问题,尝试了各种修改配置文件my.ini的方法都不行,查看到错误日志,一般错误日志在C:\Program Files\MySQL\MySQL ...

  6. [UOJ #51]【UR #4】元旦三侠的游戏

    题目大意:给$n$,一个游戏,给$a,b$,两个人,每人每次可以把$a$或$b$加一,要求$a^b\leqslant n$,无法操作人输.有$m$次询问,每次给你$a,b$,问先手可否必胜 题解:令$ ...

  7. BZOJ 2226 [Spoj 5971] LCMSum | 数论拆式子

    题目: http://www.lydsy.com/JudgeOnline/problem.php?id=2226 题解: 题目要求的是Σn*i/gcd(i,n) i∈[1,n] 把n提出来变成Σi/g ...

  8. BZOJ1787 [Ahoi2008]Meet 紧急集合 【LCA】

    1787: [Ahoi2008]Meet 紧急集合 Time Limit: 20 Sec  Memory Limit: 162 MB Submit: 3578  Solved: 1635 [Submi ...

  9. oracle数据库导入导出方法

    Oracle Database 10g以后引入了最新的数据泵(Data Dump)技术,使DBA或开发人员可以将数据库元数据(对象定义)和数据快速移动到另一个oracle数据库中. 数据泵导出导入(E ...

  10. Codeforces Round #350 (Div. 2) A

    A. Holidays time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...