今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会认为死机了,毫不犹豫的关掉应用;一般用于下载任务,删除大量任务,网页加载等;如果有使用HTML5为手机布局的,也可以用于手机中~ 效果图: 1、html结构:
简单分析下: div.loadBar代表整个进度条 div.loadBar div 设置了圆角表框 ,div.loadBar div span 为进度 (动态改变宽度), div.loadBar div span i 为进度填充背景色(即width=100%) HTML的结构,大家可以自己设计,只要合理,都没有问题~ 2、CSS:
此时效果为: 整体布局就是利用position relative和absolute~ 比较难的地方就是,渐变条的实现: 我们采用 a、从左上到右下的渐变 b、颜色分别为:0-25% 为#7ed047 , 25%-50% 为#4ea018 , 50%-75%为#7ed047 , 75%-100%为#4ea018 c、背景的大小为40px 40px 这个设置超过高度就行, 越大,条文宽度越宽 分析图: 设置的原理就是上图了,同时可以背景宽度设置越大,条文宽度越大; 3、设置Js,创建LoadBar对象
我们创建了一个LoadBar对象,同时公开了两个方法,一个设置最大进度,一个设置当前进度;比如下载文件最大进度为文件大小,当前进度为已下载文件大小。 4、测试 最后我们测试下我们的代码:
|