NProgress使用教程

GitHub地址

https://github.com/rstacruz/nprogres

 

演示网站

https://ricostacruz.com/nprogress/

 

安装NProgress.JS

(1)外链引入方式

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

(2)NPM安装方式

$ npm install --save nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

(3)CDN

 

用法

(1)基础用法

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

(2)高级用法

设置百分比:调用 .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() 方法,以随机量递增进度条,永远不会达到100%,用于每个图像负载(或类似)

NProgress.inc();

特定值增量:调用 .inc(n) 方法以特定值递增进度条

NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994

强制完成:通过传递 true 到 .done() 方法,将显示进度条,即使它未显示(默认如果不调用 .start() 方法, .done() 方法不会做任何事)

NProgress.done(true);

获取状态值:使用 .status 获取状态值

 

配置

minimum:更改启动时使用的最小百分比(默认:0.08

NProgress.configure({ minimum: 0.1 });

template:可以使用 template 更改标记,若要使进度条保持工作,请将元素 role='bar' 保留在那里,参阅默认模板以进行参考

NProgress.configure({
  template: "<div class='....'>...</div>"
});

easingspeed:使用 easing(a CSS easing string)和 speed(ms)调整动画(默认:ease200

NProgress.configure({ easing: 'ease', speed: 500 });

trickle:将其设置为 false 关闭自动递增行为(默认:true

NProgress.configure({ trickle: false });

trickleSpeed:调整滴答/递增的频繁度(以ms表示)

NProgress.configure({ trickleSpeed: 200 });

showSpinner:将其设置为 false 来关闭 Loading Spinner(默认:true

NProgress.configure({ showSpinner: false });

parent:指定此选项以更改父容器(默认:body

NProgress.configure({ parent: '#container' });

 

定制

根据您的喜好编辑 nprogress.css 文件

posted @ 2020-11-22 11:15  SnowQiQi  阅读(2104)  评论(0编辑  收藏  举报