Create Circular Progress Bars Using JavaScript And SVG

Preview:

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:

• Best Circular/Radial Progress Bar JavaScript Plugins
• Best JavaScript & CSS Progress Bar Components

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"]
}

Changelog:

v1.0.6 (10/04/2020)

• Fix Several circular-progress-bars
• Updated doc

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