跨浏览器动画进度圈 - circleProgressBar.js

跨浏览器动画进度圈 - circleProgressBar.js

版本:

浏览量:193

最后更新:2021-09-11

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

一个超轻(约 1.1kb 缩小)jQuery 插件,通过使用 SVG (VML) 路径生成平滑、动画、跨浏览器、循环进度指示器

如何使用它:

1. 在网页上包含所需的 jQuery 和 Raphael JavaScript 库。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/raphael.min.js"></script>

2. 为进度圈创建一个占位符并定义百分比值如下:

<div class="percent" style="width:80px;height:80px;">
  <p style="display:none;">60%</p>
</div>

3. 在网页底部包含 jQuery circleProgressBar.js 脚本。

<script src="jQuery.circleProgressBar.min.js"></script>

4. 初始化插件,在页面上渲染一个基本的进度圈。

$(function(){
  $('.percent').percentageLoader();
});

5. 确定笔画宽度。默认值:20。

$('.percent').percentageLoader({
  strokeWidth: 8
});

6. 确定文本/路径/背景颜色。

$('.percent').percentageLoader({
  bgColor: '#d9d9d9',
  ringColor: '#d53f3f',
  textColor: '#9a9a9a'
});

7. 自定义百分比值。

$('.percent').percentageLoader({
  valElement: 'p',
  fontSize: '12px',
  fontWeight: 'normal'
});

发表评论

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