Radial Progress Bar With JavaScript And HTML5 Canvas

Category: Javascript , Loading | August 30, 2016
Views Total:11,465 views
Official Page:Go to website
Last Update:August 30, 2016


Radial Progress Bar With JavaScript And HTML5 Canvas


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

You Might Be Interested In:

One thought on “Radial Progress Bar With JavaScript And HTML5 Canvas

Leave a Reply