首页 🎉 极客

本文最后更新于 2021 年 02 月 08 日,已超过 94 天没更新!内容可能已失效,请自行测试 ~

效果:


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

步骤:

1.下载

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

2.引入需要的 nprogress.cssnprogress.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资源下,默认删除20262108的内容。




文章评论

    测试 访客FireFoxWindows
    2020-10-18 17:04   回复

    这是一条测试评论

      slienca 站长ChromeWindows
      2020-10-18 17:05   回复

      这是回复测试

目录