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

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

 14592  39  查看评论 (16)
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);
相关插件-加载,圆边

jQuery nprogress.js页面加载进度条

jQuery nprogress.js页面加载进度条显示当前网页的加载进度
  加载
 29232  99

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

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

3D立体环形进度图表

3D立体环形进度图表,只要传入0100的整数,就能显示对应的百分比,大小自适应。
  加载
 8721  42

申请表单进度表

申请表单进度表
  加载
 12425  171

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

    遥远的她。 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的时候也显示进度条的那个背景圆呀? 回复
    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

    有木有解决方法

    回复
取消回复