笔记本电脑或是台式机
互联网
Pace.js
点击下载Pace.js Javascript，如下图所示。
选择Pace.js 颜色，如下图所示。
这里，选择其中的Center Atom，该款式样式如下。.pace.pace-inactive { display: none;}.pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 2000; position: fixed; height: 60px; width: 100px; margin: auto; top: 0; left: 0; right: 0; bottom: 0;}.pace .pace-progress { z-index: 2000; position: absolute; height: 60px; width: 100px; -webkit-transform: translate3d(0, 0, 0) !important; -ms-transform: translate3d(0, 0, 0) !important; transform: translate3d(0, 0, 0) !important;}.pace .pace-progress:before { content: attr(data-progress-text); text-align: center; color: #fff; background: #29d; border-radius: 50%; font-family: 'Helvetica Neue', sans-serif; font-size: 14px; font-weight: 100; line-height: 1; padding: 20% 0 7px; width: 50%; height: 40%; margin: 10px 0 0 30px; display: block; z-index: 999; position: absolute;}.pace .pace-activity { font-size: 15px; line-height: 1; z-index: 2000; position: absolute; height: 60px; width: 100px; display: block; -webkit-animation: pace-theme-center-atom-spin 2s linear infinite; -moz-animation: pace-theme-center-atom-spin 2s linear infinite; -o-animation: pace-theme-center-atom-spin 2s linear infinite; animation: pace-theme-center-atom-spin 2s linear infinite;}.pace .pace-activity { border-radius: 50%; border: 5px solid #29d; content: ' '; display: block; position: absolute; top: 0; left: 0; height: 60px; width: 100px;}.pace .pace-activity:after { border-radius: 50%; border: 5px solid #29d; content: ' '; display: block; position: absolute; top: -5px; left: -5px; height: 60px; width: 100px; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);}.pace .pace-activity:before { border-radius: 50%; border: 5px solid #29d; content: ' '; display: block; position: absolute; top: -5px; left: -5px; height: 60px; width: 100px; -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);}@-webkit-keyframes pace-theme-center-atom-spin { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(359deg) }}@-moz-keyframes pace-theme-center-atom-spin { 0% { -moz-transform: rotate(0deg) } 100% { -moz-transform: rotate(359deg) }}@-o-keyframes pace-theme-center-atom-spin { 0% { -o-transform: rotate(0deg) } 100% { -o-transform: rotate(359deg) }}@keyframes pace-theme-center-atom-spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(359deg) }}
引入Pace.js以及主题文件，如下图所示。
Configuration（配置）Pace is fully automatic, no configuration is necessary to get started.If you would like to make some tweaks, here's how:You can set window.paceOptions before bringing in the file:Pace.js会自动加载到页面中，不需要挂接到任何代码，会自动检测进度。如果你想做一些调整，你可以设置window.paceOptions来自定义配置：配置过程，如下图所示。
You can also put options on the script tag:你也可以将自定义设置放到script标签内，如下图所示。
If you're using AMD or Browserify, you can pass your options to start:如果你使用AMD或者Browserify来加载模块的话，你可以通过这样子来设置（例如：start）：
Pace exposes the following methods:Pace.js公开的API列表，Pace.start：开始显示进度条，如果你不是使用AMD或者Browserify来加载模块的话，这个会默认执行。Pace.restart：进度条重新加载以及显示。Pace.stop：隐藏进度条以及停止加载。Pace.track：监测一个或者多个请求任务。Pace.ignore：忽略一个或者多个请求任务。如下图所示。
Pace.js案例代码，如下图所示。
Pace.js案例运行效果，如下图所示。
该插件可以兼容IE8以上的所有主流插件，IE8以下版本不支持
Pace.js不依赖于JQuery