使用pace.js实现Youtube顶部加载进度条效果

使用pace.js实现Youtube顶部加载进度条效果

用过Youtube的童鞋应该都有个印象,你在Youtube搜索或者进入某个视频时,顶部会有一条红色的进度条,那么我们应该如何在我们自己的网站上实现这个效果呢?

方法一:使用pace.js

pace.js有14种样式,以下代码演示最简洁的(也是Youtube所使用的)样式。

pace.js非常简单,不需要任何初始化,只需要分别引入pace.js文件和css文件即可,把以下代码保存到一个html文件中,打开html页面即可查看效果:

<!DOCTYPE html>
<html>
    <head>
        <script  src="https://www.xiebruce.top/static/pace-progress-bar/pace.min.js"></script>
        <link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-minimal.css" rel="stylesheet" />
    </head>
    <body>
        This is a demo page of using pace.js progress bar.
    </body>
</html>

其它效果,你还可以把pace-theme-minimal.css换成以下效果:

<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-barber-shop.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-big-counter.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-bounce.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-center-atom.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-center-radar.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-center-simple.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-corner-circle.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-corner-indicator.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-fill-left.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-flash.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-flat-top.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-loading-bar.css" rel="stylesheet" />
<link href="https://www.xiebruce.top/static/pace-progress-bar/pace-theme-macos.css" rel="stylesheet" />

其它用法详见:PACE

方式二: 使用nprogress.js

nprogress.jspace.js复杂一点,引入js、css文件后,需要手动启动进度条,并自己使用页面加载完成事件,在页面加载完成事件里结束进度条,并且它没有pace.js那么多样式。

把以下代码保存到一个html文件,打开该html文件即可预览效果

<!DOCTYPE html>
<html>
    <head>
        <script src="https://www.xiebruce.top/static/nprogress/nprogress.js"></script>
        <link href="https://www.xiebruce.top/static/nprogress/nprogress.css" rel="stylesheet" />

    </head>
    <body>
        This is a demo page of using nprogress.js progress bar.
    </body>
    <script type="text/javascript">
        /*
        * 注意:该js必须放在body的下面,否则报错,因为nprogress.js需要读取document.body.style
        */
        //开始进度条
        NProgress.start();
        //在页面加载结束时,结束进度条
        document.onreadystatechange = function() {
            if (document.readyState == "complete") {
                NProgress.done();
            }
        }
    </script>
</html>
打赏
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x

扫码在手机查看
iPhone请用自带相机扫
安卓用UC/QQ浏览器扫

使用pace.js实现Youtube顶部加载进度条效果