ring-progress

Circle-Progress

theapin

Circle-Progress是一款使用js编写的基于canvas的环形进度条插件，该插件简单小巧，高度可配置，不依赖任何第三方库。

使用示例代码

html代码

<canvas id="canvas" width="600px" height="600px"></canvas>

js代码

var ring = new Ring({
	canvasId:'canvas',
	x:100,
	y:100,
	r:60,
	strokeStyle:"rgb(255,84,6)",
	color:"rgb(46,47,255)",
	width:15,
	percent:68.8,
	animate:false,
	text:"进度条"
});

配置属性

属性	默认值	含义
canvas	'canvas'	canvas id值
x	100	圆心x坐标
y	100	圆心y坐标
r	100	圆环半径
width	15	圆环宽度
percent	50	进度条百分比
direction	false	绘制方式是否是顺时针
strokeBgStyle	"#DDDDDD"	背景环的背景色
strokeStyle	"#01FF01"	百分环的背景色
text	""	环形中显示的文字内容
color	"#333"	环形文字中的颜色
fontSize	16	文字大小
animate	true	是否动画加载环形