对于某些用户来说， 进度条可能是非常有用的。 它告知他们离完成任务有多近。 通常，这用于提供更加用户友好的体验。 在您喜欢的浏览器上打开网页时，浏览器选项卡中已经存在一个默认进度栏，以查看该页面是否已完全加载。
使用Pace.js，您现在可以将页面加载进度栏合并到自己的页面中。
Pace.js是一个JavaScript库， 用于在网站中创建漂亮的页面加载进度栏 。 通过检查ajax请求，文档就绪状态，事件循环滞后（表明正在执行javascript）以及页面上特定元素的存在来自动建立进度。
当ajax导航或pushState事件发生时，进度栏也将再次重新启动。
入门
Pace.js非常易于实现。 即使您的站点中没有jQuery库 ，也可以使用它。 你只需要把pace.js和您所选择CSS主题 尽早到您的文档：
<head> <script src="../pace.js"></script> <link href="../themes/pace-theme-corner-indicator.css" rel="stylesheet" /> </head>
而已！ 完成后，您的网站现在有了漂亮的页面加载进度栏。
组态
从实质上讲，由于Pace.js具有完全的自动化功能，因此无需其他配置 。 但是，如果默认设置不能满足您的需求，那么您也可以使用自己的配置。
要进一步自定义，可以选择两种简单的方法。 首先，通过在window.paceOption包含如下配置。
<script>
paceOptions = {
// Configuration goes here. Example:
elements: false,
restartOnPushState: false,
restartOnRequestAfter: false
}
</script>
第二种方法是，您可以轻松地在script标签内添加data-pace-options然后定义配置并像这样调用speed.js资源。
<script data-pace-options='{ "ajax": false }' src='pace.js'></script>
您可以在源页面中找到可用配置的完整列表。
最终思想
该插件带有许多现成的主题 。 要查看主题的完整列表和演示，可以直接转到插件站点 。 如果这些主题不适合您，则可以轻松创建自己的主题。 借助Pace.js之类的插件，现在您不必担心在站点中实现加载页面进度栏的困难。