使用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.js比pace.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>
觉得文章对你有用的话鼓励一下我吧
