效果:

效果演示

1.下载

官网下载地址:https://ricostacruz.com/nprogress/

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

nprogress

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

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

NProgress.start();
NProgress.done();

可以通过调用 .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();

通过使用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内的些许代码
如图:
Main
Main
如果在没有自己改动过的CSS资源下,默认删除20262108的内容。

原文:https://www.catct.cn/archives/674.html

最后修改:2021 年 03 月 16 日 12 : 49 PM
如果觉得我的文章对你有用,请随意赞赏