NProgress 一个小巧玲珑的进度条

  • 2020 年 10 月 17 日
  • 98次
  • 250 字
  • 2 条评论

效果:


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的内容。


版权属于:slienca

本文链接:https://blog.slienca.top/archives/229.html



—— 收到 2 条评论 ——

    测试
    2020 年 10 月 18 日 17:04

    这是一条测试评论

      2020 年 10 月 18 日 17:05

      这是回复测试

OωO