Simple and Animated Circular Progress Bar in SVG

A simple circular progress bar is a single call works to multiple progress carousels. IntersectionObserver support, the animation starts when an individual graph appears in view.

How to make use of it:

Import the principle JavaScript file circularProgressBar.js into the HTML doc.

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

Create a container on which you need to draw the circular progress bar and config the progress bar utilizing 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 attainable choices 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"]
}

Create Circular Progress Bars Using JavaScript And SVG, Circular Progress Bar Plugin/Github