欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 工具类 > 多种数值显示方式的jQuery圆形进度条插件

多种数值显示方式的jQuery圆形进度条插件

多种数值显示方式的jQuery圆形进度条插件

关键词:进度条插件,圆形进度条插件,jquery圆形进度条,js圆形进度条,jquery圆形进度条插件,js圆形进度条插件,jquery库,gongjulei

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

简要教程

这是一款多种数值显示方式的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

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_gongjulei/9715.html

 在线演示  免费下载
编号:201907240000009715
大小:0.1MB
上传时间:2019-07-24 08:00
素材由用户"760161469"上传分享。

标签

最新推荐素材

与多种数值显示方式的jQuery圆形进度条插件相关的素材

.