ring-progress - npm explorer

ring-progress

v1.0.0

A canvas-based circular progress bar written in js

circle-progress canvas js prototype

0/weekUpdated 3 years agoMITUnpacked: 4.7 KB

Published by theapin

npm install ring-progress

Repository Homepage npm

Circle-Progress

$3

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

##### 使用示例代码

html代码

``

`





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|是否动画加载环形|