HTML5圆形百分比进度条插件circleChart

所属分类:UI-加载,圆边

 16194  40  查看评论 (19)
HTML5圆形百分比进度条插件circleChart ie兼容12

circleChart使用方法

在页面中引入jquery和circleChart.min.js文件。

<script src="path/to/jquery.min.js"></script>
<script src="path/to/circleChart.min.js"></script>

HTML结构

使用一个<div>元素作为该圆形百分比进度条的HTML结构:

<div class="circleChart" id="circle1"></div>

初始化插件

在页面DOM元素加载完毕,可以通过circleChart()方法来初始化该圆形百分比进度条插件。

$("#circle1").circleChart();

 配置参数

circleChart.js圆形百分比进度条插件的默认配置参数如下:

color: "#3459eb",
backgroundColor: "#e6e6e6",
background: true,
speed: 2000,
widthRatio: 0.2,
value: 66,
unit: "percent",
counterclockwise: false,
size: 110,
startAngle: 0,
animate: true,
backgroundFix: true,
lineCap: "round",
animation: "easeInOutCubic",
text: false,
redraw: false,
cAngle: 0,
textCenter: true,
textSize: false,
textWeight: "normal",
textFamily: "sans-serif",
relativeTextSize: 1 / 7,
autoCss: true,
onDraw: false

实例

$(".circleChart").circleChart({
      value: 68,
      startAngle: 180,
      speed: 3000,
      animation: "easeInOutCubic"
   });
setInterval(function() {
   $(".circleChart").circleChart({
      value: Math.random()*100
   });
}, 4000);
相关插件-加载,圆边

菊花加载

超好用的菊花加载效果,可用于手机端
  加载
 29829  96

HTML5手机端手指滑动上拉加载

jQuery HTML5手机端手指滑动上拉加载代码是一款通过jquery实现tab切换和上拉加载更多的效果,适用于手机端页面开发。
  加载
 20394  217

jQuery简单进度条插件

jQuery简单实用的轻量级进度条插件
  加载
 46775  57

圆形进度按钮

执行按钮提交创建圆形进度加载提示
  加载
 9821  112

讨论这个项目(19)回答他人问题或分享插件使用方法奖励jQ币

    丁紫依-玩呗娱乐科技 0
    2018/7/20 14:56:22
    插件很好用,但是竟然不兼容ie11 用不上啊。。。。。。 回复
    吴安可 0
    2018/6/7 14:03:41
    使用babel转换es5完成之后,还是有问题 Object.assign IE不支持。。 回复
    遥远的她。 0
    2018/1/12 19:08:45

    怎么弄渐变色

        Wendy.L0
        2018/4/2 14:04:24
        同求,有解决办法了嘛
    回复
    海东青 0
    2017/12/25 16:06:59

    怎么将背景换成虚线

    回复
    周明润 0
    2017/12/21 14:41:09
    竟然不兼容ie,ie11都不兼容,有什么解决办法吗 回复
    呵呵 0
    2017/11/28 15:25:13
    heyujun- 0
    2017/11/14 0:14:49
    怎样在value=0的时候也显示进度条的那个背景圆呀?
        花开半夏0
        2018/6/12 15:07:04
        解决了吗?
    回复
    HJ 0
    2017/10/24 11:16:44

    我去,能不能不要去掉小数点啊

    回复
    郭文玺 0
    2017/10/24 9:02:02

    es6写的  需要用babel转换

    回复
    蜡雾 0
    2017/10/18 18:39:07

    跟 v-for 打架  我要遍历下来   要有多个  有没有办法解决?

    回复
取消回复