当前位置:主页 > JavsScript库 > 其它 >

带有 Promise 支持的简易进度条引擎 - rsup-progress
栏目分类:其它   发布日期:2021-08-27   浏览次数:

Rsup Progress 是一个简单、快速、现代的带有 promise 支持的进度条 JavaScript 库。

使用:

1安装并导入Rsup Progress作为ES模块。

# NPM
$ npm i rsup-progress --save

2. 或者在文档中加载UMD版本的Rsup Progress库。

<script src="rsup-progress.js"></script>
// 或
import Progress from './dist/index.js';

3. 初始化库,我们准备好了。

// ES 模块
const progress = new Progress();
 
// 浏览器
const progress = new RsupProgress();

4. 启动进度条。

progress.start()

5. 结束进度条。

fetch('data.json').then(response => {
  progress.end()
})

6. 与 Promise 一起使用。

const response = await progress.promise(fetch('data.json'))
// 添加一个延迟
progress.promise(delay(500), 200)

7. 默认配置。

const progress = new RsupProgress({
      maxWidth: '99.8%',
      height: '4px',
      duration: 60000,
      hideDuration: 400,
      zIndex: '9999',
      color: '#ff1a59',
      className: '',
      timing: 'cubic-bezier(0,1,0,1)',
      position: 'top', // 或 'bottom', 'none'
      container: document.body
})

8. 更新选项。

progress.setOptions({
  // 这里的选项
})

9. 检查进度条是否正在运行。返回true或false。

progress.isInProgress


官方网站:https://github.com/skt-t1-byungi/rsup-progress

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库