# nprogress
适用于 Ajax'y 应用程序的超薄进度条
## 安装
`npm i nprogress`
或
`cnpm i nprogress`
或
`yarn add nprogress`
等
## 引用
```
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
```
```
import NProgress from "nprogress";
import "nprogress/nprogress.css";
```
## 配置
```
NProgress.configure({
// 动画方式
easing: "ease",
// 递增进度条的速度
speed: 500,
// 是否显示加载ico
showSpinner: false,
// 自动递增间隔
trickleSpeed: 200,
// 百分比更改启动时使用的最小百分比。（默认值：`0.08`)
minimum: 0.3
});
```
## 配置
### `minimum`
更改启动时使用的最小百分比。（默认值：`0.08`)
~~~
NProgress.configure({ minimum: 0.1 });
~~~
### `template`
您可以使用 更改标记。要使进度条保持工作正常，请保留一个元素`template``role='bar'`
~~~
NProgress.configure({ template: "<div class='....'>...</div>"});
~~~
### `easing`和`speed`
使用缓动（CSS*缓动*字符串）和*速度*（以毫秒为单位）调整动画设置。（默认值：和`ease``200`)
~~~
NProgress.configure({ easing: 'ease', speed: 500 });
~~~
### `trickle`
通过将其设置为 来关闭自动递增行为。（默认值：`false``true`)
~~~
NProgress.configure({ trickle: false });
~~~
### `trickleRate`和`trickleSpeed`
您可以调整*涓滴速率*（每次涓流增加多少）和*涓滴速度*（涓滴的频率，以毫秒为单位）。
~~~
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
~~~
### `showSpinner`
通过将加载微调器设置为 false 来关闭它。（默认值：`true`)
~~~
NProgress.configure({ showSpinner: false });
~~~
### `parent`
指定此选项可更改父容器。（默认值：`body`)
~~~
NProgress.configure({ parent: '#container' });
~~~
## 使用
```
// 开启进度条动画
NProgress.start();
// 关闭进度条动画
NProgress.done();
```
## 高级用法
百分比：要设置进度百分比，请调用 ，其中 n 是 介于 两者之间的数字。`.set(n)`0..1
```
NProgress.set(0.0); // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0); // Sorta same as .done()
```
递增：要递增进度条，只需使用 .这将以随机量递增它。这永远不会达到100%：将其用于每次图像加载（或类似图像）。`.inc()`
```
NProgress.inc();
```
如果要按特定值递增，可以将其作为参数传递：
```
NProgress.inc(0.2);
// This will get the current status value and adds 0.2 until status is 0.994
```
强制完成：通过传递到 ，它将显示进度条，即使它没有被显示。（默认行为是，如果未调用 `.start（）` ，则 `.done（）` 将不执行任何操作）`truedone()`
```
NProgress.done(true);
```
获取状态值：要获取状态值，请使用`.status`
