这是一款多种数值显示方式的jQuery圆形进度条插件。该圆形进度条可以作为jquery插件,也可以作为纯js插件来使用。它基于SVG,内置了多种漂亮的数值和外观显示方式。
使用方法
在页面中引入下面的文件。
<!-- 纯 JavaScript --> <script src="dist/circle-progress.min.js"></script> <!-- jQuery插件 --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="dist/jquery.circle-progress.min.js"></script>
HTML结构
<div class="progress"></div>
初始化插件
// Vanilla JavaScript new CircleProgress('.progress', { max: 100, value: 50 }); // jQuery $('.progress').circleProgress({ max: 100, value: 50 });
CSS样式
.circle-progress-svg { /* width: 200px; height: auto; ... */ } .circle-progress-circle { /* stroke-width: 6px; stroke: hsl(39, 100%, 85%); ... */ } .circle-progress-value { /* stroke-width: 6px; stroke: hsl(39, 100%, 50%); ... */ } .circle-progress-text { /* fill: hsl(39, 100%, 50%); ... */ } .circle-progress-text-value { /* fill: red; ... */ } .circle-progress-text-max { /* fill: red; ... */ }
API
设置圆形进度条的数值:
- horizontal (horizontal)
- vertical
- percent
- value
- valueOnCircle
- none
new CircleProgress('.progress', { textFormat: 'horizontal' });
自定义圆形进度条的填充动画。
new CircleProgress('.progress', { // linear, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuadr, easeOutQuadr, easeInOutQuadr or none animation: 'easeInOutCubic', // duration in milliseconds animationDuration: 600 });
自定义圆形进度条的填充动画。
new CircleProgress('.progress', { // linear, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuadr, easeOutQuadr, easeInOutQuadr or none animation: 'easeInOutCubic', // duration in milliseconds animationDuration: 600 });
设置圆形进度条的开始角度。
new CircleProgress('.progress', { startAngle: 45 });
其它配置参数。
new CircleProgress('.progress', { // min value min: 0, // false = anti-clockwise clockwise: true, // whether the value should be constrained between min and max constrain: true, // indeterminate text indeterminateText, '?' });
该多种数值显示方式的jQuery圆形进度条插件的github网址为:https://github.com/tigrr/circle-progress
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!