轻量级进度条 – Nprogress.js

最新推荐文章于 2023-12-19 16:23:13 发布

aomiano55778

最新推荐文章于 2023-12-19 16:23:13 发布

阅读量195

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/feixiablog/p/9435316.html

版权

进度条库是前端中常见的库之一，bootstrap中提供了多种进度条样式。NProgress.js和nanobar.js是两款轻量级的进度条组件，使用简便。

轻量级的ajax进度条应用，灵感来自Google, YouTube, and Medium。

纳米级的进度条。具有逼真的动画涓涓细流来说服你的用户，something is happen！！！

1.minimum：设置最低百分比

NProgress.configure({minimum:0.1});

2.template：改变进度条的HTML结构。为保证进度条能正常工作，需要元素拥有role=’bar’属性。

NProgress.configure({
  template:"<div class='....'>...</div>"
});

3.ease：调整动画设置，ease可传递CSS3缓冲动画字符串（如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（单位ms）。

NProgress.configure({ease:'ease',speed:500});

只需要调用start() 和 done()来控制进度条

NProgress.start();

NProgress.done();

a.百分比：通过设置progress的百分比，调用 .set(n)来控制进度，其中n的取值范围为0-1。

NProgress.set(0.0);     // Sorta same as .start()

NProgress.set(0.4);

NProgress.set(1.0);     // Sorta same as .done()

b.递增：要让进度条增加，只要调用 .inc()。这会产生一个随机增量，但不会让进度条达到100%。此函数适用于图片加载或其他类似的文件加载。

NProgress.inc();

c.强制完成：通过传递 true 参数给done()，使进度条满格，即使它没有被显示。

NProgress.done(true);

转载于:https://www.cnblogs.com/feixiablog/p/9435316.html

关注