使用代碼為網頁頂部加上加載進度條

2021-3-10

網頁頭部加一個網頁加載進度條，看起來還是挺有意思的。其實制作很簡單，只需要用JS監聽網頁加載進度即可。

使用jQuery

$({property: 0}).animate({property: 100}, { 
    duration: 5000,//進度條加載進度的速度 
    step: function() { 
        var percentage = Math.round(this.property); 
        $('#progress').css('width',  percentage+"%"); 
        if(percentage == 100) { 
            $("#progress").addClass("done");//100%后消失 
        } 
    } 
});

css代碼

body{ 
        margin:0; 
} 
#progress { 
        position:fixed; 
        height: 2px; 
        background:#b91f1f; 
        transition:opacity 500ms linear 
} 
#progress.done { 
        opacity:0 
} 
#progress span { 
        position:absolute; 
        height:2px; 
        opacity:1; 
        width:150px; 
        right:-10px; 
} 
 
@-webkit-keyframes pulse { 
        30% { 
                opacity:.6 
        } 
        60% { 
                opacity:0; 
        } 
        100% { 
                opacity:.6 
        } 
}

網頁可以用JS在body頭部插入一個元素，作為進度條，不想那么麻煩，也可以直接寫代碼

<body> 
        <div id="progress"> 
                <span><span> 
        </div> 
<body>

使用插件

nprogress是一個jQuery插件，只有幾K大小。使用起來非常方便和簡單。

先引入

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

控制顯示，下面這兩句代碼，分別放到頁面開頭和網頁加載完成事件里面即可。

NProgress.start();//開始加載進度條
NProgress.done();//停止顯示進度條

控制進度條的速度

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

下載和dome

https://ricostacruz.com/nprogress/

作者：applek

鏈接：http://www.yydfqli.cn/syclwtydbjsjzjdt.html

文章版權歸作者所有，未經允許請勿轉載。

THE END

精品人伦一区二区三区蜜桃视频_日韩精品视频在线_www.色综合_久久久久久一区_aaaaaa黄色片_亚洲精品久久

使用代碼為網頁頂部加上加載進度條

使用插件