html圆圈数据展示,多种数值显示方式的jQuery圆形进度条插件

这是一款多种数值显示方式的jQuery圆形进度条插件。该圆形进度条可以作为jquery插件，也可以作为纯js插件来使用。它基于SVG，内置了多种漂亮的数值和外观显示方式。

使用方法

在页面中引入下面的文件。

HTML结构

初始化插件

// Vanilla JavaScript

new CircleProgress('.progress', {

max: 100,

value: 50

});

// jQuery

$('.progress').circleProgress({

max: 100,

value: 50

});

CSS样式

.circle-progress-svg {

/*

width: 200px;

height: auto;

...

*/

}

.circle-progress-circle {

/*

stroke-width: 6px;

stroke: hsl(39, 100%, 85%);

...

*/

}

.circle-progress-value {

/*

stroke-width: 6px;

stroke: hsl(39, 100%, 50%);

...

*/

}

.circle-progress-text {

/*

fill: hsl(39, 100%, 50%);

...

*/

}

.circle-progress-text-value {

/*

fill: red;

...

*/

}

.circle-progress-text-max {

/*

fill: red;

...

*/

}

API

设置圆形进度条的数值：

horizontal (horizontal)

vertical

percent

value

valueOnCircle

none

new CircleProgress('.progress', {

textFormat: 'horizontal'

});

自定义圆形进度条的填充动画。

new CircleProgress('.progress', {

// linear, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuadr, easeOutQuadr, easeInOutQuadr or none

animation: 'easeInOutCubic',

// duration in milliseconds

animationDuration: 600

});

自定义圆形进度条的填充动画。

new CircleProgress('.progress', {

// linear, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuadr, easeOutQuadr, easeInOutQuadr or none

animation: 'easeInOutCubic',

// duration in milliseconds

animationDuration: 600

});

设置圆形进度条的开始角度。

new CircleProgress('.progress', {

startAngle: 45

});

其它配置参数。

new CircleProgress('.progress', {

// min value

min: 0,

// false = anti-clockwise

clockwise: true,

// whether the value should be constrained between min and max

constrain: true,

// indeterminate text

indeterminateText, '?'

});