纯CSS圆形进度条(原创)

所属分类:UI-图表

 7063  13  查看评论 (6)
分享到微信朋友圈
X
纯CSS圆形进度条(原创) ie兼容12

更新时间:2023-07-28 23:34:55

更新说明:修复进度在60-75之间动画会出现闪动 , 使用方法不变


更新时间: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' );
相关插件-图表

D3&jquery多功能图表(原创)

基于D3的多功能图表。可添加描述,收缩节点,滚轮缩放整图尺寸
  图表
 16599  212

jQuery移动端固定表格表头和任意表列(原创)

jQuery固定表格表头和任意表列,只适用于移动端
  图表
 21879  217

动态实时折线图

根据时间和数据而动态的折线图
  图表
 74163  512

AmChart使用例子

AmChart统计图插件使用例子
  图表
 33700  397

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Simonkes丶阿不从 0
    2023/7/26 9:14:54
    当percentagest>50时,setTimeout的毫秒值需要动态设置,否则动画有问题
        panking0
        2023/7/26 10:21:41
        什么问题
        Simonkes丶阿不从1
        2023/7/26 11:49:06
        把示例的80%改为60%就能看出问题了
    回复
    Simonkes丶阿不从 0
    2023/7/26 0:15:35
    现在的起点在12点钟位置,如何修改起点为3点钟位置呢?
        panking1
        2023/7/26 10:21:29
        初始percentagest设为25
        Simonkes丶阿不从1
        2023/7/26 11:58:58
        我修改了css的clip-path,将左右改为上下,就可以了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复