Create Circular Progress Bars Using JavaScript And SVG

Category: Javascript | October 4, 2020
Author:tomik23
Views Total:275 views
Official Page:Go to website
Last Update:October 4, 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.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

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

    Reply
  2. asdfs

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

    Reply
    1. Greg

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

      Reply

Leave a Reply