jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件。该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果，进度条使用渐变色来填充，效果非常的酷。
使用方法
<script src="jquery/1.11.0/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> |
配置参数
下面是该圆形进度条插件的一些可用参数：
| 参数 | 描述 |
| value |
这是唯一一个必填参数。值从0.0到1.0，默认值为0 |
| size | canvas的大小，单位像素，默认值100 |
| startAngle |
初始角度，默认值为-Math.PI |
| reverse |
是否反向绘制圆弧和动画，默认值为false |
| thickness |
进度条圆弧的宽度。默认它自动为size的1/14大小，你可以设置你需要的值。默认值为auto |
| lineCap |
圆弧的线头样式："butt"、"round"和"square"。详细信息看这里。默认值为"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" }默认值为 { gradient: ["#3aeabb", "#fdd250"] } |
| emptyFill |
空圆弧的颜色。默认值为"rgba(0, 0, 0, .1)" |
| animation |
动画配置。可以参考jQuery animations。你可以设置为false来禁止动画。默认值：{ duration: 1200, easing: "circleProgressEase" }。"circleProgressEase"是一个ease-in-out-cubic easing动画效果 |
| animationStartValue |
默认进度条动画会在0.0开始，结束与value处。调用该参数可以直接动画。如果需要制作反向动画就将animationStartValue的值设置为1.0。你可以指定0.0到1.0之间的任何数值。默认值为0.0 |
事件
在允许进度条动画的情况下，有三个事件可用。
| 事件 | 处理程序 |
circle-animation-start： |
function(event)- event - jQuery事件 |
circle-animation-progress |
function(event, animationProgress, stepValue)：- event - jQuery事件animationProgress - 从0.0到1.0stepValue - 当前的步长值，从0.0到value |
circle-animation-end |
function(event)：- event - jQuery事件 |
浏览器兼容
该圆形进度条插件使用<canvas>，所有的现代浏览器都支持该元素，包括IE9+。可以查看Can I Use。
在不支持的浏览器中，插件提供了一些回退代码，如IE8浏览器。
其它
如果进度条组件已经被初始化，你可以获取<canvas>：
$('#circle').circleProgress({ value: 0.5 });var canvas = $('#circle').circleProgress('widget'); |
你可以获取CircleProgress对象实例：
|
|
7款HTML5 Canvas全屏背景动画特效
HTML5 Canvas条形码生成代码
Canvas彩色弹性碰撞小球动画
canvas弹性拖动大树摇摆特效
html5 svg绘制卡通树动画特效HTML5特效下载排行
-
2015-02-05
-
2015-02-05
-
2016-05-31
-
2015-03-08
-
2015-03-24
-
2015-02-05
-
2015-12-04
-
2017-03-24
最新文章
-
2017-03-24
-
2016-08-22
-
2016-08-22
-
2016-08-22
-
2016-08-02
-
2016-08-02
-
2016-05-31
-
2016-05-31
热门源码
