在百度上搜了很多方法去修改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. 【CodeForces】9A-Die Roll

    目录 Question Solution 解法1 解法2 Question 三个人掷骰子,前两个人的得分分别是Y和W,问第三个人胜利的概率(第三个人得分不小于Y.W)?结果输出格式为\(A/B\),如 ...

  2. 二分图最大权匹配:Kuhn-Munkres算法

    http://www.cnblogs.com/kuangbin/archive/2012/08/19/2646535.html

  3. Beat 冲刺 (3/7)

    队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 1.界面的修改与完善 展示GitHub当日代码/文档签入记 ...

  4. B - 整数区间

    B - 整数区间 Time Limit: 1000/1000MS (C++/Others) Memory Limit: 65536/65536KB (C++/Others) Problem Descr ...

  5. [C/C++] C/C++中数字与字符串之间的转换

    在C中: 方法: 1.C标准库中的sprintf, sscanf 2.C标准库还提供了 atoi, atof, atol, atoll(C++11标准) 函数将字符串转换成int,double, lo ...

  6. 全局 Ajax 事件处理器

    jQuery中将Ajax请求和响应分成了若干(5)个阶段 并且允许开发者在Ajax请求和响应的不同阶处理不同的逻辑, 这些方法用于注册事件处理器,用来处理页面上的任何 Ajax 请求,当某些事件触发后 ...

  7. 利用FFT来进行字符串匹配

    给定串A和串B,A由26个小写字母构成,B由?和26个小写字母构成 ?可以和任意字符匹配 求A中出现了多少次B 这里可以使用fft做法,定义向量A和向量B 然后求A和rev(B)的卷积结果C C的第i ...

  8. gdb调试命令的使用及总结

    gdb调试命令的使用及总结 gdb是一个在UNIX环境下的命令行调试工具.如果需要使用gdb调试程序,请在gcc时加上-g选项.下面的命令部分是简化版,比如使用l代替list等等. 1.基本命令 命令 ...

  9. [洛谷P3834] 【模板】可持久化线段树 1(主席树)

    题目大意:静态区间第K小 题解:主席树 卡点:无 C++ Code: #include <cstdio> #include <algorithm> #define maxn 2 ...

  10. 【BZOJ 1770 】 [Usaco2009 Nov]lights 燈 dfs+异或方程组

    这道题明显是异或方程组,然而解不一定唯一他要的是众多解中解为1的数的最小值,这个时候我们就需要dfs了我们dfs的时候就是枚举其有不确定解的数上选0或1从而推知其他解,由于我们dfs的时候先0后1,虽 ...