站长资源
ProgressCircle.js是一款基于SVG的jquery圆形进度条插件。该jquery圆形进度条插件通过动态生成SVG元素和CSS3动画来制作漂亮的圆形进度条动画特效。
使用方法
在页面中引入progresscircle.css和jquery以及progresscircle.js文件。
<link href="css/progresscircle.css" rel="stylesheet"> <scriptt src="jquery.min.js"></scriptt> <scriptt src="progresscircle.js"></scriptt>
html结构
<div class="circlechart" data-percentage="-20"> -20% </div> <div class="circlechart" data-percentage="50"> 50% </div>
data-percentage属性代表圆形进度条的百分比，可以是负数，负数表示反向执行动画。
或者使用js api
<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 moreDefault: "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 falseDefault: { 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
|
评论前必须登录！
注册