一个漂亮，强大的进度条插件。监听http请求的状态，并且直观的展示Http请求进度。
简体中文 | English
npm run dev
npm run build
使用 npm:
npm i @onaug6th/load-bar使用script标签:
<script src="/dist/loadBar.min.js"></script>页面中先引入jquery，然后再引入loadBar.min.js。
$("body").loadBar();
var options = {...}
$("#other").loadBar(options);var opt = {
displayOnRequest: false,
height: 200,
endLoad: function(){
// do sth
}
}
$("body").loadBar(opt);| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| displayOnRequest | 是否在请求中展示 | Boolean |
true |
| background | 进度条背景色 | String |
#29d |
| img | 是否使用图片 | String |
|
| height | 进度条高度 | Number, String |
2px |
| all | 任何事件都会触发 | Function |
noop |
| startLoad | 进度条出现前触发 | Function |
noop |
| endLoad | 进度条消失后触发 | Function |
noop |
| mounted | 进度条挂载后触发 | Function |
noop |
$("body").on("startLoad", function(){
// do sth
})| 名称 | 说明 | 类型 |
|---|---|---|
| all | 任何事件都会触发 | Function |
| startLoad | 进度条出现前触发 | Function |
| endLoad | 进度条消失后触发 | Function |
| mounted | 进度条挂载后触发 | Function |
$("body").loadBar("start");
// or
$("body").loadBar("getOpt", "img");
// or
$("body").loadBar("setOpt", "img", yourPath);| 名称 | 说明 | 参数 |
|---|---|---|
| start | 进度条开始 | |
| end | 进度条结束 | |
| setOpt | 设置进度条配置属性 | attrName: String Object, value: String |
| getOpt | 获取配置属性 | attrName: String |
| destroy | 摧毁进度条 | |
| sayName | 打招呼 | name:string |
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent