多种数值圆形进度条jQuery插件

创客云


这是一款多种数值显示方式的jQuery圆形进度条插件。该圆形进度条可以作为jquery插件,也可以作为纯js插件来使用。它基于SVG,内置了多种漂亮的数值和外观显示方式。

使用方法

在页面中引入下面的文件。

  1. <!-- 纯 JavaScript -->
  2. <script src="dist/circle-progress.min.js"></script>
  3.  
  4. <!-- jQuery插件 -->
  5. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  6. <script src="dist/jquery.circle-progress.min.js"></script>

HTML结构

  1. <div class="progress"></div>

初始化插件

  1. // Vanilla JavaScript
  2. new CircleProgress('.progress', {
  3.   max: 100,
  4.   value: 50
  5. });
  6.  
  7. // jQuery
  8. $('.progress').circleProgress({
  9.   max: 100,
  10.   value: 50
  11. });
  12. CSS样式
  13. .circle-progress-svg {
  14.   /* 
  15.     width: 200px; 
  16.     height: auto;
  17.     ...
  18.    */
  19. }
  20.  
  21. .circle-progress-circle {
  22.   /* 
  23.     stroke-width: 6px;
  24.     stroke: hsl(39, 100%, 85%);
  25.     ...
  26.    */
  27. }
  28.  
  29. .circle-progress-value {
  30.   /* 
  31.     stroke-width: 6px;
  32.     stroke: hsl(39, 100%, 50%);
  33.     ...
  34.   */
  35. }
  36.  
  37. .circle-progress-text {
  38.   /* 
  39.     fill: hsl(39, 100%, 50%);
  40.     ...
  41.   */
  42. }
  43.  
  44. .circle-progress-text-value {
  45.   /* 
  46.     fill: red;
  47.     ...
  48.   */
  49. }
  50.  
  51. .circle-progress-text-max {
  52.   /* 
  53.     fill: red;
  54.     ...
  55.   */
  56. }

API

设置圆形进度条的数值:

  1.     horizontal (horizontal)
  2.     vertical
  3.     percent
  4.     value
  5.     valueOnCircle
  6.     none
  7.  
  8. new CircleProgress('.progress', {
  9.     textFormat: 'horizontal'
  10. });

自定义圆形进度条的填充动画。

  1. new CircleProgress('.progress', {
  2.   // linear, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuadr, easeOutQuadr, easeInOutQuadr or none
  3.   animation: 'easeInOutCubic',
  4.  
  5.   // duration in milliseconds
  6.   animationDuration: 600
  7. });

自定义圆形进度条的填充动画。

  1. new CircleProgress('.progress', {
  2.   // linear, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuadr, easeOutQuadr, easeInOutQuadr or none
  3.   animation: 'easeInOutCubic',
  4.  
  5.   // duration in milliseconds
  6.   animationDuration: 600
  7. });

设置圆形进度条的开始角度。

  1. new CircleProgress('.progress', {
  2.   startAngle: 45
  3. });

其它配置参数

  1. new CircleProgress('.progress', {
  2.     // min value
  3.     min: 0,
  4.  
  5.     // false = anti-clockwise
  6.     clockwise: true,
  7.  
  8.     // whether the value should be constrained between min and max
  9.     constrain: true,
  10.  
  11.     // indeterminate text
  12.     indeterminateText, '?'
  13.  
  14. });

Github网址:https://github.com/tigrr/circle-progress

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/50306.html
云模板

发表评论