Easy Animated Progress Bar In jQuery - progress-bar.js

Easy Animated Progress Bar In jQuery - progress-bar.js

版本:

浏览量:72

最后更新:2021-09-11

应用标签:MAC 软件Jquery插件

推荐指数:

详细信息

一个微小的、可定制的、动画进度条 jQuery 插件,可根据您指定的百分比平滑地填充水平条。

该插件最好的部分是平滑填充动画仅在进度条滚动到视图中时才会触发。

也可以看看:

  • JavaScript 和 CSS 中的 10 个最佳进度条(线性)组件

  • 10 个最佳圆形/径向进度条 JavaScript 插件

  • Vue.js 应用程序的 10 个最佳进度条组件

  • 10 个最好的 JavaScript 和 CSS 进度条组件

如何使用它:

1. 下载并包含progress-bar.css&progress-bar.js在包含 jQuery 库之后。

<link rel="stylesheet" href="progress-bar.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="progress-bar.js"></script>

2. 为进度条编写 HTML 代码。可用的 HTMLdata属性:

  • data-percent:进度条百分比

  • 数据颜色:背景颜色

<div class="progress-bar">
  <div class="progress"
       data-percent="60"
       data-color="green">
       <span>60%</span>
  </div>
</div>

3. 初始化插件并完成。

$(document).ready(function(){
  $(".progress-bar").ProgressBar();
});

关于作者:

添加一名作者

网址:https//github.com/nayem1145/ProgressBar

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。