使用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 ...
随机推荐
- 更换ubuntu软件源的方法
第一步:查看本系统Codename 输入lsb_release -a查看本系统Codename,我的codename是bionic,如图: 第二步:搜索与codename对应的镜像地址 我搜索到的是: ...
- HTTPS初始
https会话 1客户端 2服务器端 1 ---http三次握手--- 2 1<--------------->2 协商建立ssl会话 选择加密协议 sslv3 1 <------- ...
- css制作环形文本
css制作环形文本 在项目开发中,我们可能会遇到环形文本的需求,这个时候,怎样在代码以通俗易懂的前提下实现我们需要的效果呢?可能你会想到用一个一个的span元素计算出旋转的角度然后拼接起来,这个方案不 ...
- js日期插件bootstrap-datetimepicker的使用
js日期插件——bootstrap-datetimepicker的使用心得: 在大多说的web项目中,都有日期选择器的使用.如果自己写一个日期选择器的话,费时又费力,而且不一定能写出来_(:3 」∠) ...
- 完整Android开发基础入门博客专栏
博客地址:http://www.runoob.com/w3cnote/android-tutorial-contents.html
- 数据结构7——DP优化
斜率优化/单调队列优化/四边形优化
- NIO Q&A(持续补充。。。。)
Q:NIO是非阻塞的.但调用的selector.select()方法会阻塞.这和NIO非阻塞岂不是矛盾了? A:非阻塞指的是 IO 事件本身不阻塞,但是获取 IO 事件的 select 方法是需要阻塞 ...
- E. Sonya and Ice Cream(开拓思维)
E. Sonya and Ice Cream time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- zigbee ---- profile 和 cluster
在zigbee规范中,引入了profile, cluster的概念.具体说来,假设规范一个profile(可以理解成一套规定),这个profile用来规范智能家居领域的相关产品都要满足那些要求,那么h ...
- __cdecl,__stdcall,__fastcall,__pascal,__thiscall 的区别
关于函数的调用规则(调用约定),大多数时候是不需要了解的,但是如果需要跨语言的编程,比如VC写的dll要delphi调用,则需要了解. microsoft的vc默认的是__cdecl方式,而windo ...