NProgress .js

• 超小的全局顶部进度条

直接引入

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

npm安装导入

$ npm install --save nprogress
import NProgress from 'nprogress'

基本用法

• NProgress.start()
  显示进度条

• NProgress.set(n)
  设置进度条的百分比，0~1之间

NProgress.set(0.0);     // 类似于start()
NProgress.set(0.4);
NProgress.set(1.0);     //类似于done()

• NProgress.inc()
  使进度条增加一个随机量（非100%），也可以传递一个增量值，会在当前基础上增加该值，最大0.994

NProgress.inc();
NProgress.inc(0.2);

• NProgress.done()
  使进度条完成既满格

NProgress.done()
NProgress.done(true)

• NProgress.remove()

NProgress.configure()

传递一个对象类型配置

• minimum
  开始时的最低百分比（默认0.08）
• template
  进度条自定义HTML，
• easing & speed
  动画设置，接收CSS3 缓冲动画字符串，以及动画速度
• trickle
  设置自动递增的默认行为（默认true）
• trickleSpeed
  进度条默认速度
• showSpinner
  是否显示右上角螺旋加载提示
• parent
  父容器（默认body）

NProgress.configure({
  mininum:0.1,
template: "<div class='....'>...</div>",
easing: 'ease', speed: 500,
trickle: false,
trickleSpeed: 200,
showSpinner: false,
parent: '#container'
})