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>

最后编辑于：2017.12.10 05:01:21

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,560评论 4赞 361
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,104评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,297评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,869评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,275评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,563评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,833评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,543评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,245评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,512评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,011评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,359评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,006评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,062评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,825评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,590评论 2赞 273
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,501评论 2赞 268

H5移动端 进度条加载

推荐阅读更多精彩内容

H5移动端进度条加载