效果：

ps：本站已经应用，可以直接看效果，试着点导航栏的页面或者文章页都是有的哈

步骤：

1.下载

官网下载地址：https://ricostacruz.com/nprogress/
GitHub项目地址：https://github.com/rstacruz/nprogress/

2.引入需要的 nprogress.css 和 nprogress.js 文件

<link rel="stylesheet" type="text/css" href="nprogress.css"/>
<script src="nprogress.js"></script>

3.基本用法：只需要调用NProgress的 start() 和 done() 的API来控制进度条

NProgress.start(); //显示进度条
NProgress.done(); //完成进度条

4.高级用法

百分比：调用 .set(n) 来设置进度百分比，其中n的取值范围为0~1。

NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

递增：调用 .inc()来随机增长进度条

NProgress.inc();

强制完成：通过传递 true 参数给 done()，使进度条满格，即使它没有被显示

NProgress.done(true);

Pjax

$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',   function() { NProgress.done();  });

Cuteen食用方法

在头部自定义内容中引用上述的JS和CSS

在底部自定义内容中添加所需调用的API

<script>
$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',   function() { NProgress.done();  });
</script>

这个时候已经实现loading动画加载的步骤，但是前台仍有主题自带的loading动画，所以需要去删除静态文件 Main.css 内的些许代码


如果在没有自己改动过的css资源下，默认删除2026到2108的内容。