使用ProgressBar.js构建自定义响应式进度条

进度条是大多数用户在网络上广为人知的。 对于开发人员而言， 从头开始创建进度条通常是一个复杂的过程。 但是，有了ProgressBar.js，您不必这样做！

这个免费的开源库没有依赖关系，并支持所有主要的浏览器 ，包括IE9 +。

默认情况下，您可以使用简单的bar ，也可以从一些基本形状中进行选择 ，例如：

• 单线
• 半圆
• 完整的循环
• 广场
• 三角形

您还可以设计自己的自定义形状，例如心形，云形，甚至是网站徽标的字母。 当然，这将需要一些努力，但最终结果可能令人难以置信。

该库适用于SVG路径 ，因此，如果您可以使用SVG标记构建轮廓形状 ，则可以使用此进度条库对其进行动画处理。

动画还可以包含文本或具有自定义的开始/停止模式 。 完整的API 带有选项/回调的更多详细信息 ，您可以在闲暇时仔细阅读。

ProgressBar.js也有一个小型安装指南 ，您可以在其中使用Bower ，npm或更简化的GitHub页面 下载和设置脚本 。

而且，如果您构建了任何很棒的工具，都可以将代码提交到GitHub存储库中 。 该项目的创建者Kimmo Brunfeldt拥有一个公开的GitHub问题 ，您可以在其中提交自定义设计以包含在库中。

您可以将动画进度条添加到注册页面， 上传字段或作为预加载器添加到任何网页。 这些选项仅受您愿意获得的详细程度的限制。

例如，我喜欢密码强度计演示，因为它具有实际目的并有益于用户体验 。 此示例随附于插件 ，因此您可以复制此文件并根据自己的喜好对其进行修改。

要查看更多示例 ，请查看ProgressBar.js主页或窥视演示心脏动画的小提琴 。

翻译自: https://www.hongkiat.com/blog/progressbar-js/