# 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`
