纯CSS圆形进度条(原创)

更新时间：2022-12-25 23:18:16

类名和样式没做封装，类名和结构尽量不要乱动，其中demo1为自定义类名可以随意更改，插件的结构如下：

<div class="panClip demost1">
    <div class="clipBox">
        <div class="clipLeft"></div>
        <div class="clipRight width-none"></div>
    </div>
    <div class="percentage">0%</div>
    <div class="circular"></div>
    <div class="corest">
        <div class="circular"></div>
    </div>
</div>

圆和圆环的大小样式js不好改，所以圆环粗细样式要自己根据下面公式改一下： 

圆环粗细公式：(外圆-内圆) / 2，所以现在圆环有20px((300 - 260) / 2 = 20); 

样式示例: 

.demost1 {
    width: 300 px!important;height: 300 px!important;
}.demost1.percentage {
    width: 260 px!important;height: 260 px!important;
}

使用方法如下：

 1. 先获取自定义类名(也可以写panClip不过获取所有的圆形进度条) 示例如下:

 let demost1 = $('.demost1').eq(0);

2. 调用panClip()函数，

参数1：获取到的自定义类元素节点，

参数2：进度条进度(不要加'%')，

参数3：进度条颜色('#ff0000') 

示例如下:

panClip(demost1, 45,'#ff0000' );

PREVIOUS:
NEXT:
echarts数据可视化模板
bootstrap动态网格拖拽组件