但是,有了ProgressBar.js,您不必这样做!

对于开发人员而言, 从头开始创建进度条通常是一个复杂的过程。

进度条是大多数用户在网络上广为人知的。

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

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

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

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

当然,这需要一些努力,但最终结果可能令人难以置信。

您还可以设计自己的自定义形状,例如心形,云形,甚至是网站徽标的字母。

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

完整的API 带有选项/回调的更多详细信息 ,您可以在闲暇时仔细阅读。

动画还可以包含文本具有自定义的开始/停止模式

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

该项目的创建者Kimmo Brunfeldt拥有一个公开的GitHub问题 ,您可以在其中提交自定义设计以包含在库中。

而且,如果您构建了任何很棒的工具,都可以将代码提交到GitHub存储库中

这些选项仅受您愿意获得的详细程度的限制。

您可以将动画进度条添加到注册页面, 上传字段或作为预加载器添加到任何网页。

此示例随附于插件 ,因此您可以复制此文件并根据自己的喜好对其进行修改。

例如,我喜欢密码强度计演示,因为它具有实际用途有益于用户体验

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


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

相关文章:

  • 2021-11-22
  • 2021-11-22
  • 2021-11-22
  • 2021-09-06
  • 2021-04-29
  • 2021-12-23
  • 2022-01-11
猜你喜欢
  • 2021-11-04
  • 2021-05-24
  • 2021-08-09
  • 2021-06-19
  • 2021-10-02
  • 2022-12-23
相关资源
相似解决方案