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

版本:

浏览量:1010

最后更新：2021-09-12

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

推荐指数:

查看演示点击下载

详细信息

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

如何使用它：

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);

联系我们