Press "Enter" to skip to content

Simple and Animated Circular Progress Bar in SVG

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

circular progress bar with percentage, bs circular progress bar, circular progress bar generator online, circular progress bar css

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, pure css radial progress bar animation


See Demo And Download

Official Website(tomik23): Click Here

This superior jQuery/javascript plugin is developed by tomik23. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.