CircularProgressBar.js
A lightweight circular progress bar made with Js, SVG circles, and CSS transitions.
How to use
Add these tags in yout HTML:
<html> <head> <!-- Import CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AngeloFaella/CircularProgressBar@1.0/circularProgressBar.css"> </head> <body> <!-- Add a container with class="cpb-progress-container" --> <div id="my-container" class="cpb-progress-container"><div> <!-- Import Js --> <script src="https://cdn.jsdelivr.net/gh/AngeloFaella/CircularProgressBar@1.0/circularProgressBar.min.js"></script> </body></html>Then initialize the circular progress bar, for example:
xxxxxxxxxx let myProgressBar = new CircularProgressBar(360, 360, 'my-container', { strokeSize: 30, backgroundColor: 'rgba(0,0,0,.35)', strokeColor: '#ff3333', showProgressNumber: false, centerIcon: 'img/done_icon_yellow.svg', oncomplete: () => console.log('Task completed!') });See a live example here.
Documentation
Methods
- new CircularProgressBar(width, height, container, [options])
- .setBackgroundColor(color)
- .setStrokeColor(color)
- .showProgressNumber(enabled)
- .setCenterIcon(src)
- .setProgress(percent)
- .getProgress() ⇒
Number
new CircularProgressBar(width, height, container, [options])
Kind: constructor of CircularProgressBar
| Param | Type | Default | Description |
|---|---|---|---|
| width | Number | width in px | |
| height | Number | height in px | |
| container | String | ID of the parent | |
| [options] | Object | progress bar options | |
| [options.strokeSize] | Number | 1 | size of the stroke |
| [options.backgroundColor] | String | 'black' | background color of the inner circle |
| [options.strokeColor] | String | 'white' | color of the stroke |
| [options.centerIcon] | String | icon displayed at the center of the inner circle | |
| [options.showProgressNumber] | Boolean | false | icon displayed at the center of the inner circle |
| [options.oncomplete] | EventListener | callback function invoked when progress reach 100% |
circularProgressBar.setBackgroundColor(color)
set color of the inner circle
Kind: instance method of CircularProgressBar
| Param | Type | Description |
|---|---|---|
| color | String | a valid CSS color |
circularProgressBar.setStrokeColor(color)
set color of the stroke
Kind: instance method of CircularProgressBar
| Param | Type | Description |
|---|---|---|
| color | String | a valid CSS color |
circularProgressBar.showProgressNumber(enabled)
Kind: instance method of CircularProgressBar
| Param | Type | Description |
|---|---|---|
| enabled | Boolean | boolean to show/hide progress number |
circularProgressBar.setCenterIcon(src)
set an image at the center of the progressbar
Kind: instance method of CircularProgressBar
| Param | Type | Description |
|---|---|---|
| src | String | image src |
circularProgressBar.setProgress(percent)
Set progress of the progressbar (with animation);
Kind: instance method of CircularProgressBar
| Param | Type | Description |
|---|---|---|
| percent | Number | progress percentage |
circularProgressBar.getProgress() ⇒ Number
Get current progress
Kind: instance method of CircularProgressBar