当前位置:首页 / 网页制作 / CSS教程 / HTML5+CSS3加载进度条与下载进度条实现方法
HTML5+CSS3加载进度条与下载进度条实现方法
芯晴素材特效 分类:CSS教程 发布日期:2018-05-07

这次给大家带来HTML5+CSS3加载进度条与下载进度条实现,HTML5+CSS3加载进度条与下载进度条实现的注意事项有哪些,下面就是实战案例,一起来看一下。

效果图:

1、html结构:

1
2
3
4
5
6
7
8
<p id="loadBar01" class="loadBar"
       <p> 
            <span class="percent"
               <i></i> 
            </span> 
       </p> 
       <span class="percentNum">0%</span> 
   </p>

简单分析下:

p.loadBar代表整个进度条

p.loadBar p 设置了圆角表框 ,p.loadBar p span 为进度 (动态改变宽度), p.loadBar p span i 为进度填充背景色(即width=100%)

HTML的结构,大家可以自己设计,只要合理,都没有问题~

2、CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
body 
       
           font-family: Thoma, Microsoft YaHei, 'Lato', Calibri, Arial, sans-serif; 
       
   
       #content 
       
           margin: 120px auto; 
           width: 80%; 
       
   
       .loadBar 
       
           width: 600px; 
           height: 30px; 
           border: 3px solid #212121; 
           border-radius: 20px; 
           position: relative; 
       
   
       .loadBar p 
       
           width: 100%; 
           height: 100%; 
           position: absolute; 
           top: 0; 
           left: 0; 
       
   
       .loadBar p span, .loadBar p i 
       
           box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .4); 
           width: 0%; 
           display: block; 
           height: 100%; 
           position: absolute; 
           top: 0; 
           left: 0; 
           border-radius: 20px; 
       
   
       .loadBar p i 
       
           width: 100%; 
           -webkit-animation: move .8s linear infinite; 
           background: -webkit-linear-gradient(left top, #7ed047 0%, #7ed047 25%, #4ea018 25%, #4ea018 50%, #7ed047 50%, #7ed047 75%, #4ea018 75%, #4ea018 100%); 
           background-size: 40px 40px; 
       
   
       .loadBar .percentNum 
       
           position: absolute; 
           top: 100%; 
           right: 10%; 
           padding: 1px 15px; 
           border-bottom-left-radius: 16px; 
           border-bottom-right-radius: 16px; 
           border: 1px solid #222; 
           background-color: #222; 
           color: #fff; 
   
       
   
       @-webkit-keyframes move 
       
           0% 
           
               background-position: 0 0; 
           
           100% 
           
               background-position: 40px 0; 
           
       }

此时效果为:

整体布局就是利用position relative和absolute~

比较难的地方就是,渐变条的实现:

我们采用

a、从左上到右下的渐变

b、颜色分别为:0-25% 为#7ed047 , 25%-50% 为#4ea018 , 50%-75%为#7ed047 , 75%-100%为#4ea018

c、背景的大小为40px 40px 这个设置超过高度就行, 越大,条文宽度越宽

分析图:

设置的原理就是上图了,同时可以背景宽度设置越大,条文宽度越大;

3、设置Js,创建LoadBar对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function LoadingBar(id) 
       
           this.loadbar = $("#" + id); 
           this.percentEle = $(".percent", this.loadbar); 
           this.percentNumEle = $(".percentNum", this.loadbar); 
           this.max = 100; 
           this.currentProgress = 0; 
       
       LoadingBar.prototype = { 
           constructor: LoadingBar, 
           setMax: function (maxVal) 
           
               this.max = maxVal; 
           }, 
           setProgress: function (val) 
           
               if (val >= this.max) 
               
                   val = this.max; 
               
               this.currentProgress = parseInt((val / this.max) * 100) + "%"
               this.percentEle.width(this.currentProgress); 
               this.percentNumEle.text(this.currentProgress); 
   
   
           
       };

我们创建了一个LoadBar对象,同时公开了两个方法,一个设置最大进度,一个设置当前进度;比如下载文件最大进度为文件大小,当前进度为已下载文件大小。

4、测试

最后我们测试下我们的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function () 
     
   
         var loadbar = new LoadingBar("loadBar01"); 
         var max = 1000; 
         loadbar.setMax(max); 
         var i = 0; 
         var time = setInterval(function () 
         
             loadbar.setProgress(i); 
             if (i == max) 
             
                 clearInterval(time); 
                 return
             
             i += 10; 
         }, 40); 
     });

版权信息:本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系821794221#qq.com(#换@),我们将尽快处理。

您可能在找这些

  • 内容标签:

热门素材

JS实现的螺旋效果

2012-12-27   浏览:7912

又一款纯CSS实现的滑动门,代码非常简

2013-01-04   浏览:9039

JS+CSS打造的鼠标点击触发的导航菜单

2013-01-04   浏览:9863

推荐一款jQuery版淡出淡入的图片幻灯切

2013-01-15   浏览:8809

用CSS控制滚动条样式

2012-12-31   浏览:8114

前端模拟微信app支付页面效果

2017-03-09   浏览:265

全屏游动的图片,可以飘到浏览器外边

2012-12-30   浏览:7987

文字切换插件Adjector.js

2017-03-13   浏览:195

Canvas粒子线条连接动态背景特效

2017-05-04   浏览:859

一款CSS+JS打造的个性菜单

2013-01-04   浏览:7845

jQuery标签插件flyLabel

2017-03-16   浏览:368

html5手机端图片上传裁剪网页下载

2017-03-13   浏览:219