Create Circular Progress Bars Using JavaScript And SVG

Category: Javascript | May 1, 2020
Author: tomik23
Views Total: 554 views
Official Page: Go to website
Last Update: May 1, 2020
License: MIT

Preview:

Create Circular Progress Bars Using JavaScript And SVG

Description:

A lightweight JavaScript library to help developers to draw animated, cross-browser, highly customizable progress circles using SVG and plain JavaScript.

Also supports the IntersectionObserver API, which allows to start the animation only when the progress bar appears in the view.

See also:

How to use it:

Import the main JavaScript file circularProgressBar.js into the html document.

<script src="./circularProgressBar.js"></script>

Create a container on which you want to draw the circular progress bar.

<div class="demo"></div>

Initialize the library and specify the percentage value to be presented in the circular progress bar.

new CircularProgressBar({
    percent: 50, // 50%
    pie: 'demo'
});

Customize the appearance of the progress bar.

new CircularProgressBar({
    percent: 50, // 50%
    pie: 'demo',
    colorSlice: '#00a1ff'',
    colorCircle: '#00a1ff'',
    strokeWidth: 10, // in px
    opacity: 0.1, // 0-1
    size: 200 // in px
});

Customize the percent number displayed in the center of the progress bar.

new CircularProgressBar({
    percent: 50, // 50%
    pie: 'demo',
    number: true,
    fontSize: '3rem',
    fontWeight: 700,
    fontColor: '#365b74'
});

Changelog:

05/01/2020

  • Fixed bugs in IE 11.

04/17/2020

  • Refactor

04/15/2020

  • Added Polyfill for IntersectionObserver.

04/12/2020

  • Adding IntersectionObserver support, now the animation starts when the individual chart appears in the view.

01/14/2020

  • refactor

07/16/2019

  • refactor

07/13/2019

  • added new props

You Might Be Interested In:


One thought on “Create Circular Progress Bars Using JavaScript And SVG

  1. Greg

    Now, to call, say, 10 circular-progress-bars, just call the class once and the configuration is in html using JSON

    Reply

Leave a Reply