/CircularProgressBar

A lightweight circular progress bar made with Js, SVG circles, and CSS transitions.

Primary LanguageJavaScriptMIT LicenseMIT

examples

GitHub license GitHub release Language html css

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:

    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])

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