HTML5+CSS3网页页面载入进度条的完成,免费下载进

日期:2021-03-02 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

今日给大伙儿带来1个较为炫的进度条,进度条在1耗时实际操作上给客户1个较为好的体验,不容易让客户感觉在盲目跟风等候,针对沒有进度条的长期等候,客户会每日任务死机了,绝不迟疑的关闭运用;1般用于免费下载每日任务,删掉很多每日任务,网页页面载入等;假如有应用HTML5为手机上合理布局的,还可以用于手机上中~

实际效果图:

1、html构造:

<div id="loadBar01" class="loadBar">  
       <div>  
            <span class="percent">  
               <i></i>  
            </span>  
       </div>  
       <span class="percentNum">0%</span>  
   </div> 

 简易剖析下:

div.loadBar意味着全部进度条

div.loadBar div 设定了圆角表框 ,div.loadBar div  span 为进度 (动态性更改宽度),  div.loadBar div  span i 为进度填充情况色(即width=100%)

HTML的构造,大伙儿能够自身设计方案,要是有效,都沒有难题~

2、CSS:

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 div  
       {  
           width: 100%;  
           height: 100%;  
           position: absolute;  
           top: 0;  
           left: 0;  
       }  
  
       .loadBar div span, .loadBar div i  
       {  
           box-shadow: inset 0 ⑵px 6px rgba(0, 0, 0, .4);  
           width: 0%;  
           display: block;  
           height: 100%;  
           position: absolute;  
           top: 0;  
           left: 0;  
           border-radius: 20px;  
       }  
  
       .loadBar div 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⑵5% 为#7ed047 , 25%⑸0% 为#4ea018 , 50%⑺5%为#7ed047 , 75%⑴00%为#4ea018

c、情况的尺寸为40px 40px 这个设定超出高宽比就行, 越大,条文宽度越宽

剖析图:

设定的基本原理便是上图了,另外能够情况宽度设定越大,条文宽度越大;

3、设定Js,建立LoadBar目标

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);  
  
  
           }  
       };  

大家建立了1个LoadBar目标,另外公布了两个方式,1个设定最大进度,1个设定当今进度;例如免费下载文档最大进度为文档尺寸,当今进度为已免费下载文档尺寸。

4、检测

最终大家检测下大家的编码:

$(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);  
     });  

源代码点一下免费下载:demo

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。