Progress.js 为页面上的任意对象创建进度条效果 - 文章教程

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

发布于 2020-05-24 字数 5771 浏览 1547 评论 0

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

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

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

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

如何使用

  1. 引入 progress.jsprogressjs.css 在页面中(使用 minified 生产文件夹)
  2. 在页面中执行以下JavaScript代码:
//to set progress-bar for whole page
progressJs().start();
//or for specific element
progressJs("#targetElement").start();

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

自定义构建

首先,您应该安装 nodejsnpm,然后运行以下命令: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);
});

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论