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

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

HTML5圆形百分比进度条插件circleChart ie兼容10

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);
相关插件-加载,圆边

8种fakeloader页面加载效果代码

8种fakeloader页面加载效果代码,支持7种效果和自定义图片,兼容主流浏览器,推荐下载!
  加载
 22302  187

会员等级显示

蘑菇街会员等级显示
  加载
 8602  72

实用的loading插件

基于jQuery的loading插件
  加载
 8996  97

jQuery进度条插件NUMBERPROGRESSBAR

一个可爱的进度条。灵感来自daimajia。
  加载
 16342  30

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

    heyujun- 0
    2017/11/14 0:14:49
    怎样在value=0的时候也显示进度条的那个背景圆呀? 回复
    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 打架  我要遍历下来   要有多个  有没有办法解决?

    回复
    peaceminusone 0
    2017/9/5 10:52:36

    跟highcharts冲突,有解决办法吗

    回复
    Cuckoosir 0
    2017/8/29 17:30:10

    有木有解决方法

    回复
    Cuckoosir 0
    2017/8/29 17:29:42

    华为手机的浏览器不显示,都console不出来错误

    回复
    小蜜蜂 0
    2017/8/15 10:13:42
    - 0
    2017/8/9 19:35:05

    value为0的时候圆圈不显示怎么解决?

    回复
    ぺ演员℃ 0
    2017/7/24 9:34:55

    兄弟,你这个插件ie不兼容啊,有些坑

    回复
取消回复