circleProgress.js圆环进度条插件

复制代码

<script src="jquery.min.js"></script>
<script src="jquery-circle-progress/dist/circle-progress.js"></script>

<div id="circle"></div>

<script>
    $('#circle').circleProgress({
        value: 0.75,
        size: 80,
        fill: {
            gradient: ["red", "orange"]
        }
    });
</script>

选项：

Option	Description
value	必须值，圆环的百分比从0到1. 默认值: `0`
size	圆环大小 Default: `100`
startAngle	初始角度 Default: `-Math.PI`
reverse	是否逆时针 Default: `false`
thickness	圆环的宽度，默认为1/4的大小 Default: `"auto"`
lineCap	Arc line cap: `"butt"`, `"round"` or `"square"` - read more Default: `"butt"`
fill	圆环的填充颜色 - `{ color: "#ff1e41" }` - `{ color: 'rgba(255, 255, 255, .3)' }` - `{ gradient: ["red", "green", "blue"] }` - `{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }` - `{ gradient: [ ... ], gradientAngle: Math.PI / 4 }` - `{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }` - `{ image: "http://i.imgur.com/pT0i89v.png" }` - `{ image: imageInstance }` - `{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }` Default: `{ gradient: ["#3aeabb", "#fdd250"] }`
emptyFill	空白的圆环 Default: `"rgba(0, 0, 0, .1)"`
animation	动画设置 See jQuery animations. You may also set it to `false` Default: `{ duration: 1200, easing: "circleProgressEase" }` `"circleProgressEase"` is just a ease-in-out-cubic easing
animationStartValue	动画默认开始从那个值开始运动。 Default: `0.0`

事件

Event	Handler
`circle-animation-start`	`function(event)`: - `event` - jQuery event
`circle-animation-progress`	`function(event, animationProgress, stepValue)`: - `event` - jQuery event - `animationProgress` - from `0.0` to `1.0` - `stepValue` - current step value: from `0.0` to `value`
`circle-animation-end`	`function(event)`: - `event` - jQuery event

其他：

You can get the <canvas> (but only if the widget is already inited):

复制代码

$('#circle').circleProgress({ value: 0.5 });
var canvas = $('#circle').circleProgress('widget');

You can get the CircleProgress instance:

复制代码

var instance = $('#circle').data('circle-progress');

You can redraw existing circle (but only if the widget is already inited):

复制代码

$('#circle').circleProgress({ value: 0.5, fill: { color: 'orange' }});
$('#circle').circleProgress('redraw'); // use current configuration and redraw
$('#circle').circleProgress(); // alias for 'redraw'
$('#circle').circleProgress({ size: 150 }); // set new size and redraw