Create Circular Progress Bars Using JavaScript And SVG

Category: Javascript | July 18, 2019
Author: tomik23
Views Total: 202
Official Page: Go to website
Last Update: July 18, 2019
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.

See also:

How to use it:

Import the main JavaScript file circularProgressBar.js into the html document.

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

Create a container on which you want to draw the circular progress bar.

<div class="demo"></div>

Initialize the library and specify the percentage value to be presented in the circular progress bar.

new CircularProgressBar({
    percent: 50, // 50%
    pie: 'demo'
});

Customize the appearance of the progress bar.

new CircularProgressBar({
    percent: 50, // 50%
    pie: 'demo',
    colorSlice: '#00a1ff'',
    colorCircle: '#00a1ff'',
    strokeWidth: 10, // in px
    opacity: 0.1, // 0-1
    size: 200 // in px
});

Customize the percent number displayed in the center of the progress bar.

new CircularProgressBar({
    percent: 50, // 50%
    pie: 'demo',
    number: true,
    fontSize: '3rem',
    fontWeight: 700,
    fontColor: '#365b74'
});

Changelog:

07/18/2019

  • refactor

07/16/2019

  • refactor

07/13/2019

  • added new props

You Might Be Interested In:


Leave a Reply