A lightweight circular progress bar made with Js, SVG circles, and CSS transitions.
Add these tags in yout HTML:
<html>
<head>
<!-- Import CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AngeloFaella/[email protected]/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/[email protected]/circularProgressBar.min.js"></script>
</body>
</html>Then initialize the circular progress bar, for example:
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.
Methods
- new CircularProgressBar(width, height, container, [options])
- .setBackgroundColor(color)
- .setStrokeColor(color)
- .showProgressNumber(enabled)
- .setCenterIcon(src)
- .setProgress(percent)
- .getProgress() ⇒
Number
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% |
set color of the inner circle
Kind: instance method of CircularProgressBar
| Param | Type | Description |
|---|---|---|
| color | String |
a valid CSS color |
set color of the stroke
Kind: instance method of CircularProgressBar
| Param | Type | Description |
|---|---|---|
| color | String |
a valid CSS color |
Kind: instance method of CircularProgressBar
| Param | Type | Description |
|---|---|---|
| enabled | Boolean |
boolean to show/hide progress number |
set an image at the center of the progressbar
Kind: instance method of CircularProgressBar
| Param | Type | Description |
|---|---|---|
| src | String |
image src |
Set progress of the progressbar (with animation);
Kind: instance method of CircularProgressBar
| Param | Type | Description |
|---|---|---|
| percent | Number |
progress percentage |
Get current progress
Kind: instance method of CircularProgressBar
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent