Radial Progress Bar With JavaScript And HTML5 Canvas

Preview:

Description:

A lightweight and zero-dependence JavaScript library used for rendering a radial & circular progress bar on an HTML5 canvas element to present the percentage value you specify.

How to use it:

First you have to load the core JavaScript file RadialBar.js in the document.

<script src="dist/RadialBar.js"></script>

Then create an HTML5 canvas element on which you want to render the progress bar.

<canvas id="paper"></canvas>

Setup the HTML5 canvas element as follows:

var canvas = document.getElementById('paper');
var ctx = canvas.getContext('2d');
// optional
canvas.width = 800;
canvas.height = 600;

Create a new RadialBar instance and pass the optional settings as the second parameter to the RadialBar().

var progressBarOne = new RadialBar(ctx, 
    {
      x: 300,
      y: 300,
      radius: 150,
      lineWidth: 40,
      lineFill: '#CCB566',
      backLineFill: '#FB6929',
      bgFill: '#F8FF8E',
      progress: 90
      isShowInfoText: true,
      infoStyle: '60px Arial',
      infoColor: 'red'
    }
);

API methods.

• set(val) – set the percentage value, 0 to 100
• add(val) – add a new value, 0 to 100
• subtract(val) – subtact the value, 0 to 100
• update() – update the progress bar to a new value
• get() – get the current value
• radians(deg) – returns the degree, deg*Math.PI/180