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

Usage Instructions

1. Link file:

<script src="build/circle-progress-bar.min.js"></script>

2. Add Markup

<canvas id="canvas" width="300" height="300"></canvas>

3. 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 |