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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容