进度条是大多数用户在网络上广为人知的。 对于开发人员而言, 从头开始创建进度条通常是一个复杂的过程。 但是,有了ProgressBar.js,您不必这样做!
这个免费的开源库没有依赖关系,并支持所有主要的浏览器 ,包括IE9 +。
![progressbars js库](https://i-blog.csdnimg.cn/blog_migrate/c290f7542622215f026f70876a9ff7fe.png)
默认情况下,您可以使用简单的bar ,也可以从一些基本形状中进行选择 ,例如:
- 单线
- 半圆
- 完整的循环
- 广场
- 三角形
您还可以设计自己的自定义形状,例如心形,云形,甚至是网站徽标的字母。 当然,这将需要一些努力,但最终结果可能令人难以置信。
该库适用于SVG路径 ,因此,如果您可以使用SVG标记构建轮廓形状 ,则可以使用此进度条库对其进行动画处理。
动画还可以包含文本或具有自定义的开始/停止模式 。 完整的API 带有选项/回调的更多详细信息 ,您可以在闲暇时仔细阅读。
ProgressBar.js也有一个小型安装指南 ,您可以在其中使用Bower ,npm或更简化的GitHub页面 下载和设置脚本 。
而且,如果您构建了任何很棒的工具,都可以将代码提交到GitHub存储库中 。 该项目的创建者Kimmo Brunfeldt拥有一个公开的GitHub问题 ,您可以在其中提交自定义设计以包含在库中。
您可以将动画进度条添加到注册页面, 上传字段或作为预加载器添加到任何网页。 这些选项仅受您愿意获得的详细程度的限制。
例如,我喜欢密码强度计演示,因为它具有实际目的并有益于用户体验 。 此示例随附于插件 ,因此您可以复制此文件并根据自己的喜好对其进行修改。
要查看更多示例 ,请查看ProgressBar.js主页或窥视演示心脏动画的小提琴 。