站长资源
中国站长网站

circle-progress.js圆环进度条插件

circle-progress.js圆环进度条插件

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 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):
eventjQuery 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

免费下载  在线演示  
×

站长资源极速下载通道: circle-progress.js圆环进度条插件

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » circle-progress.js圆环进度条插件

评论 抢沙发

评论前必须登录!