JavaScript庫——pace.js的快速掌握
我们在做项目的时候，可能遇到制作 网页进度条加载 的需求。如果你感觉无从下手，那么你可以通过阅读这篇文章，快速掌握一款好用的JavaScript插件，来快速制作出炫酷的 网页进度条加载效果。
一、关于pace.js
pace.js是一款优秀的JavaScript插件，通过使用pace.js，我们可以制作出不同的网页进度条加载效果。
在页面中引入Pace.js，页面就会自动监测你的请求（包括Ajax请求），在事件循环滞后，会在页面记录加载的状态以及进度情况。
pace.js为我们提供了不同的加载进度条的主题样式，你可以选择 任意颜色 和 多种动画效果 （例如简约、闪光灯，MAC OSX，左侧填充，顶部填充，计数器和弹跳等等动画效果）。这些效果我们在文章的后面都会以动图的形式展示出来，方便你在写代码的时候，进行挑选。
如果你擅长修改css动画，那你就可以做出无限种可能性的动画，为你的网站增添个性化特色！
二、小白快速上手pace.js
如果你是没有接触pace.js的小白，那么下面跟着我，快速上手我们的pace.js，快速制作出一个炫酷的进度条加载效果。
首先根据上面提供的 GitHub链接 或者是 百度云链接，将pace.js源码下载下来，放到我们的项目文件夹中。
我们下载完成之后，会发现源码中有很多文件，这里我们只需要关注这两个问价。在引入之前，我们先了解一下这些themes文件夹。
打开hemes文件夹，发现其中又有不同的文件夹。
上面这几个文件夹，分别代表这不同的主题颜色。比如我们选择 blue 这个文件夹，点击进来之后，会发现有多个 .css文件。
上面这些 .css文件 是我们选择的蓝色主题中，不同的进度条加载样式。具体的加载样式，文章后面会以动图的形式展现出来。
现在我们了解了这些文件，下面就可以以蓝色主题为例，引入 js文件 和 css文件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>pace.js的使用</title> <link rel="stylesheet" href="pace-master/themes/blue/pace-theme-center-atom.css"> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="pace-master/pace.js"></script></head><body></body></html>
引入了文件，我们就已经完成了一个进度条加载效果，而且是可以直接使用在项目中的，下面我们看下具体的效果。
备注：
其实到这里，我们已经完成了一个进度条加载效果。无需在js中进行其他配置，毕竟人家官网API文档中已经明确写出了无需进行配置，即可开始使用。
但是看到这里，你肯定是想深入了解一下pace.js这个优秀的插件的。毕竟这个插件还有很多好用的API，掌握了这些API，我们会更好的掌握并运用这款插件。
不过在这之前，我先给出几幅动图，展示不同的进度条加载效果。方便大家在自己的项目中，选择合适的 .css文件。
作者：振礼硕晨
链接：https://www.jianshu.com/p/eef1c199dff5
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
