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

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

版本:

浏览量:1147

最后更新:2021-09-12

应用标签:Jquery插件gitMAC 软件

推荐指数:

详细信息

一个非常简单的进度条 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');
联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

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

正在加载二维码...

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

发表评论

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