jquery圆环进度条插件
在网络搜到的一个jquery圆环进度条插件，是使用canvas写的，支持纯色、渐变颜色、支持文字逐渐变化、支持定义起始角等一切跟之前我写过的HTML5 Canvas绘制矩形和圆形（圆弧）和canvas绘制旋转的圆环百分比进度条等一切圆弧的属性和方法。 
使用方法：
<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
You can change the default options:
$.circleProgress.defaults.size = 50;
下载和演示：
下载地址 在线演示 在线制作一个
