Circle Progress Bar
A distinctive feature is the possibility of setting a conical gradient for progress bar.
Features:
- Any number of colors
- Possibility to setup animation and sizes
- Possibility to control from api methods
- Events
Installation
Use bower or download archive.
bower install circle-progress-bar
Usage Instructions
- Link file:
<script src="build/circle-progress-bar.min.js"></script>
- Add Markup
<canvas id="canvas" width="300" height="300"></canvas>
- Init progress bar
var canvas = document.getElementById('canvas');
var circleProgressBar = new CircleProgressBar(canvas, {
colors: ['#0000FF', '#4B0082', '#9400D3']
});
// set initial value
circleProgressBar.setValue(0.9);
Options
| Option | Default | Description |
|---|---|---|
x |
canvas.width / 2 |
X position of circle |
y |
canvas.heigth / 2 |
Y position of circle |
colors |
['#9400D3', '#4B0082', '#0000FF'] |
List of colors for gradient |
radius |
120 |
Radius of circle |
lineWidth |
15 |
Line width |
frameInterval |
10 |
Interval of rendering circle animation |
frameStep |
0.1 |
Step of arc length for one frame |
startPosition |
-(Math.PI / 2) |
Start position of circle arc |
lineCap |
round |
Value of canvas.context.lineCap |
trackLineColor |
#eee |
Color of track line. Set null for remove it. |
maxColorsCountByValue |
{ 0.05: 2,0.2: 2,0.3: 3, 0.4: 4, 0.6: 5 } |
Max colors in gradient by value |
Methods
| Method | Params | Description |
|---|---|---|
setValue |
int |
Setting value and drawing |
getValue |
Getting value | |
setOptions |
Object |
Setting options |
draw |
Draw progress bar for current value and options | |
clear |
Clear progress bar from canvas |
Events
| Event | Description |
|---|---|
circleProgressBar.afterDraw |
After drawing. e.detail.self - current instance |
circleProgressBar.afterFrameDraw |
After drawing frame. e.detail.self - current instance, e.detail.progress - progress of drawing |
