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

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

版本:

浏览量:1225

最后更新:2021-09-11

应用标签:MAC 软件gitJquery插件

推荐指数:

详细信息

一个微小的、可定制的、动画进度条 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

联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

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