H5移动端 进度条加载

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>移动端进度条</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <style>  
        html {  
          font-size: 20px;  
        }  
        body {  
          font-size: 16px;  
          font-family: "微软雅黑";  
        }  
        @media only screen and (max-width: 320px) {    html {   
                font-size: 42.7px !important;   
            }}   
        @media only screen and (min-width: 321px) and (max-width: 360px) {    html {   
                font-size: 48px !important;   
            }}   
        @media only screen and (min-width: 361px) and (max-width: 375px) {    html {   
                font-size: 50px !important;   
            }}   
        @media only screen and (min-width: 376px) and (max-width: 384px) {    html {   
                font-size: 52.1px !important;   
            }}   
        @media only screen and (min-width: 385px) and (max-width: 414px) {    html {   
                font-size: 55.2px !important;   
            }}   
        @media only screen and (min-width: 415px) and (max-width: 480px) {    html {   
                font-size: 64px !important;   
            }}   
        @media only screen and (min-width: 481px) and (max-width: 540px) {    html {   
                font-size: 72px !important;   
            }}  
        @media only screen and (min-width: 750px) {    html {   
                font-size: 100px !important;   
            }}  
  
        .loading_fater{  
            width: 4.14rem;  
            height: 0.44rem;  
            line-height: 0.44rem;
            background: #391956;  
            border: 3px solid #FFFFFF;  
            box-shadow: 0 3px 7px 0 rgba(189,16,224,0.50);  
            border-radius: 100px;  
            position: relative;
            margin: 50% auto 0;
        }  
        .loading{   
            width: 0.02rem;  
            height: 0.44rem;  
            background: #FE6365;  
            box-shadow: inset 0 0 4px 0 #470707;  
            border-radius: 100px;  
        }  
        .loading_fater> span{  
            color: white;  
            position: absolute;  
            top: 0;  
            left: 2rem;  
        }  
    </style>  
</head>  
<body>  
    <div class="loading_fater">  
        <div class="loading"></div>  
        <span><label class="bfb">0</label>%</span>  
    </div>  
      
    <script type="text/javascript">   
          
        /** 
         * 由于js并不能获取下载所需资源包文件大小  
         * 所以只能在页面各个部位插入代码片段, 更新进度条, 以模拟资源下载(读取)进度 
         */  
          
        updateLoading(10,1);
          
        //用延迟  模拟加载文件需要的时间 
        setTimeout(function(){  
            updateLoading(60,1);  
        },1000) 

        setTimeout(function(){  
            updateLoading(100,1);  
        },3000)  
          
        var bfb = document.getElementsByClassName('bfb')[0];  
        /** 
         * 更新进度条 
         * @param {Object} bfb_num :更新进度条数字baifenbi (10) 
         * @param {Object} millisecond :动画执行毫秒数 
         */  
        function updateLoading(bfb_num,millisecond){  
              
            document.getElementsByClassName('loading')[0].style.cssText = 'width: '+bfb_num+'%;transition-duration:'+millisecond+'s;'  
              
            var load_Interval = setInterval(function(){  
                if(bfb.innerHTML < bfb_num){  
                    bfb.innerHTML = parseInt(bfb.innerHTML)+1;  
                }else{  
                    clearInterval(load_Interval);  
                }  
            },millisecond*1000/bfb_num)  
        }  
          
    </script>   
</body>  
</html>  

推荐阅读更多精彩内容