Progress.js 为页面上的任意对象创建进度条效果

Question

Progress.js 是一个 JavaScript 和 CSS3 的库，它帮助开发人员为网页上的每个对象创建和管理进度条效果。你可以设计自己的模板，进度条或者干脆定制。

您可以使用 Progress.js 为网页中的任何加载中内容（图片，视频等）向用户呈现进度条。它可以用在所有的元素，包括文本输入框，文本域，甚至整个页面。它很轻量，易于似乎用和定制，而且是免费和开源的。

它重量轻，易于使用，可定制，免费和开源。

如何使用

1. 引入 progress.js 和 progressjs.css 在页面中(使用 minified 生产文件夹)
2. 在页面中执行以下JavaScript代码：

//to set progress-bar for whole page
progressJs().start();
//or for specific element
progressJs("#targetElement").start();

使用其他方法增加、减少或设置进度栏的自动增加功能.此外，您还可以使用setOption方法。

自定义构建

首先，您应该安装 nodejs 和 npm，然后运行以下命令：npm install 要安装所有依赖项，请执行以下操作。

现在您可以运行这个命令来缩小所有静态资源：

make build

API 文档

progressJs([targetElm])

创建 ProgressJS 对象。v0.1.0

参数：

• targetElm：String(可选)应该定义为启动特定元素的进度栏，例如：#targetElement.

返回：

• ProgressJS 对象。

例子：

progressJs() //without selector, set progress-bar for whole page
progressJs("#targetElement") //start progress-bar for element id='targetElement'

---

ProgressJs.start()

启动已定义元素的进度条。v0.1.0

返回：

• ProgressJS 对象。

例子：

progressJs().start()

---

progressJs.set(percent)

将特定百分比设置为进度栏 v0.1.0

参数：

• percent：Number，设置为特定百分比

返回：

• ProgressJS 对象。

例子：

progressJs().set(20); //set progress to 20%

---

progressJs.autoIncrease(size, millisecond)

为进度栏设置自动增加计时器 v0.1.0

参数：

• size: Number 经过计时器时增量的大小。
• millisecond: Number计时器，毫秒

返回：

• ProgressJS 对象。

例子：

progressJs().start().autoIncrease(4, 500);
//every 500 milliseconds, percentage + 4

---

progressJs.increase([size])

增加进度条指定的大小。默认大小为 1。 v0.1.0

参数：

• size: Number 增量大小

返回：

• ProgressJS 对象。

例子：

progressJs().increase(); //increase one percent
progressJs().increase(2); //increase two percent

---

progressJs.end()

结束进度栏并从页面中删除元素 v0.1.0

返回：

• ProgressJS 对象。

例子：

progressJs().start().set(20).end()

---

progressJs.setOption(option, value)

将一个选项设置为ProgressJs对象 v0.1.0

参数：

• option : String 选项键名。
• value : String/Number 设置的值。

返回：

• ProgressJS 对象。

例子：

progressJs().setOption("theme", "black");

---

progressJs.setOptions(options)

为 ProgressJS 对象设置一组选项 v0.1.0

参数：

• options : Object 对象，该对象包含带有值的选项键。

返回：

• ProgressJS 对象。

例子：

progressJs().setOptions({ 'theme': 'black', 'overlayMode': true });

---

progressJs.onbeforeend(providedCallback)

为进度栏结束前设置回调函数 v0.1.0

参数：

• providedCallback : Function

返回：

• ProgressJS 对象。

例子：

progressJs().onbeforeend(function() {
  alert("before end");
});

---

progressJs.onbeforestart(providedCallback)

在启动进度栏之前，将回调函数设置为调用 v0.1.0

参数：

• providedCallback : Function

返回：

• ProgressJS 对象。

例子：

progressJs().onbeforestart(function() {
  alert("before start");
});

---

progressJs.onprogress(providedCallback)

将回调函数设置为对进度条的每次更改进行调用 v0.1.0

参数：

• providedCallback : Function

返回：

• ProgressJS 对象。

例子：

progressJs().onprogress(function(targetElm, percent) {
  alert("progress changed to:" + percent);
});

相关链接

• Github 地址：https://github.com/usablica/progress.js/
• 在线示例：http://usablica.github.io/progress.js/