Create Circular Progress Bars Using JavaScript And SVG

Category: Javascript | October 4, 2020
Author: tomik23
Views Total: 2,258 views
Official Page: Go to website
Last Update: October 4, 2020
License: MIT


Create Circular Progress Bars Using JavaScript And SVG


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.min.js"></script>

Create a container on which you want to draw the circular progress bar and config the progress bar using the data-pie attribute:

<div class="pie" data-pie='{ "percent": 82, "colorSlice": "#E91E63", "time": 30, "fontWeight": 400 }'></div>
<div class="pie" data-pie='{ "percent": 60, "colorSlice": "#ffc107", "time": 30, "fontWeight": 400 }'></div>
<div class="pie" data-pie='{ "percent": 82, "colorSlice": "#00bcd4", "time": 30, "fontWeight": 400 }'></div>

All possible options to customize the circular progress bar.

  "percent": 65, 
  "round": true,
  "colorSlice": "#00a1ff",
  "strokeWidth": 10,
  "opacity": 0.1,
  "number": true,
  "colorCircle": "#e6e6e6",
  "size": 200,
  "fontSize": "1.6rem",
  "fontWeight": 700,
  "fontColor": "#365b74",
  "time": 30,
  "end": 264,
  "lineargradient": ["#ff0000","#9c27b0"]


v1.0.6 (10/04/2020)

  • Fix Several circular-progress-bars
  • Updated doc


  • Fixed bugs in IE 11.


  • Refactor


  • Added Polyfill for IntersectionObserver.


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


  • refactor


  • refactor


  • added new props

You Might Be Interested In:

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

  2. asdfs

    Uncaught DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘.[object Object]’ is not a valid selector.

    1. Greg

      Go to github there you have detailed instructions on how to use the library. Here the manual is out of date.


Leave a Reply