Slim 可编程进度条插件 - jQuery ProBar

Slim 可编程进度条插件 - jQuery ProBar

版本:

浏览量:1128

最后更新:2021-09-12

应用标签:Jquery插件MAC 软件git

推荐指数:

详细信息

ProBar 是一个小而强大的 jQuery 进度条插件,用于在可定制的、动画的、水平的、细长的条中可视化数字数据(百分比)。

更多功能:

  • 使用您自己的 CSS 轻松自定义。

  • 可配置的动画速度。

  • 允许您以编程方式操作进度条。

如何使用它:

1. 要使用进度条,只需ProBar.js在 jQuery 库之后加载脚本,我们就可以开始了。

<!-- Require Jquery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Require ProBar.js -->
<script src="ProBar.js"></script>

2、初始化ProBar插件,生成默认进度条。您可能需要指定要在其中呈现进度条的容器。默认值:'身体'。

<div class="myProBar"></div>
var probar = new ProBar({
    wrapper : ".myProBar"
    wrapperId : "wrapperSetBar"
});

3.启动进度条,5秒内达到100%。

probar.goto(100,5);

4. 自定义背景和条形颜色。

var probar = new ProBar({
    wrapper : ".myProBar",
    color   : "#2a2a2a",
    bgColor : "#efefef
});

5.自定义动画速度。默认值:0.3(以秒为单位)。

var probar = new ProBar({
    wrapper : ".myProBar",
    speed   : 0.5
});

6. 默认情况下,进度条会在完成后自动关闭。您可以在 JavaScript 中关闭自动关闭功能。

var probar = new ProBar({
    finish<a href="https://www.jqueryscript.net/animation/">Animation</a> : false
});

7. 可用的 API 方法使您能够完全控制进度条。

// set the bar color
probar.setColor("#2980b9");
 
// set the background color
probar.setWrapperColor("#ecf0f1");
 
// set the animation speed
probar.setSpeed(3000);
 
// go to 100%
probar.goto(100);
 
// reach 100% in 3 secondes
probar.goto(100,3);
 
// disable the finish animation
probar.setFinishAnimation(false);
联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

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

正在加载二维码...

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

发表评论

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