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

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

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

HTML5实现的网页进度条

HTML5实现的网页进度条
  加载
 15212  75

8种fakeloader页面加载效果代码

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

纯css3制作绿色loading加载动画特效

纯css3制作绿色loading加载动画特效里面包含14款不同效果的绿色清新loading加载特效。
  加载
 15623  151

圆形进度条,再也不怕圆形进度条不兼容不帅气

圆形进度条原理。转化为jquery也非常方便。 原理都差不多(原创)
  加载
 52522  148

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

    遥远的她。 0
    2018/1/12 19:08:45
    海东青 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

    有木有解决方法

    回复
取消回复