JavaScript 和 SVG 中的圆形和线性进度条 - progressBar

版本:

浏览量:1111

最后更新：2021-09-12

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

推荐指数:

查看演示点击下载

详细信息

一个非常简单的进度条 JavaScript 插件，可帮助您使用基于raphael.js 的SVG 生成动画、圆形或线性进度条。

适用于 jQuery 和 Vanilla JavaScript。

如何使用它：

1.progressBar.js在网页上包含需要的 raphael.js 库和脚本。jQuery 是可选的。

<!-- OPTIONAL -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Required -->
<script src="/path/to/cdn/raphael.min.js"></script>
<script src="/path/to/progressBar.min.js"></script>

2. 为进度条创建一个占位符。

<div class="example"></div>

3. 创建一个圆形进度条。可能的参数：

el: DOM 元素
val：百分比值（0-100）
bg：背景色
颜色：文字颜色
textColor：值颜色
fontSize：值大小
尺寸：圆形尺寸
r：半径
时间：持续时间
缓动： “线性”、“<”或“easeIn”或“缓入”、“>”或“easeOut”或“缓出”、“<>”或“easeInOut”或“缓入” , 'backIn' 或 'back-in', 'backOut' 或 'back-out', 'elastic', 'bounce'

win.loopFun(document.getElementsByClassName('example'), 60, '#ccc', '#00A0E9', '#00A0E9', '20px', 20, 60, 1000, 'bounce');

4. 创建一个线性进度条。可能的参数：

el: DOM 元素
val：百分比值（0-100）
bg：背景色
颜色：文字颜色
textColor：值颜色
fontSize：值大小
长度：条宽
尺寸：酒吧高度
时间：持续时间
缓动： “线性”、“<”或“easeIn”或“缓入”、“>”或“easeOut”或“缓出”、“<>”或“easeInOut”或“缓入” , 'backIn' 或 'back-in', 'backOut' 或 'back-out', 'elastic', 'bounce'

win.stripFun(document.getElementsByClassName('example'), 55.66, '#ccc', '#00A0E9', 'white', '14px', 300, 20, 1000, 'back-out');

5. 将其用作 jQuery 插件。

win.loopFun($('.example')[0],60,'#ccc','#00A0E9','#00A0E9','20px',20,60,1000,'bounce');
win.loopFun($('.example')[0],88.88,'#ccc','#565656','#333','20px',20,60,1000,'back-out');
win.stripFun($('.example')[0],55.66,'#ccc','#00A0E9','white','14px',300,20,1000,'back-out');
win.stripFun($('.example')[0],30.66,'#ccc','#00A0E9','white','14px',300,20,1000,'easeInOut');

联系我们