Radial progress bar

Progress bars are useful to show how far you are in a process. Indeed, it can be helpful to visualize data. There are a lot of bars and charts libraries in the Internet but I wanted to make my own. Radial progress bar was made using jQuery.

Demo

10% Initializing25% Setting style
42% Loading67% Rendering
100% Finishing

API

  • RadialBar.createBar();

    Initializing progress bar. RadialBar is global object.

  • RadialBar.style({name:value,...});

    Set style for radial bar. List of styles properties:

    diameter - diameter of progress bar (pt)

    backgroundColor - background color of progress bar (RGB, HEX)

    emptyStrokeColor - border color around progress bar (RGB, HEX)

    fillStrokeColor - filled border color (RGB, HEX)

    fillStrokeWidth - filled border width (pt)

    percentagesFontSize - font size of percentages label (px, pt, em)

    percentagesFontColor - font color of percentages label (RGB, HEX)

    descriptionFontSize - font size of description label (px, pt, em)

    descriptionFontColor - font color of description label (RGB, HEX)

  • RadialBar.set(percentages, description (optional));

    Setting percentages and description to this percentages.

Usage

Add links to css and js files on your HTML page and paste the code below links where you want to place progress bar:

...
//links
<link rel="stylesheet" href="/radialbar/styles/radialbar.css">
<script src="/radialbar/radialbar.js"></script>
...
//progress bar
<div id="bar-container"></div>

Paste also the code that initializes radial progress bar. Usually I put it inside of ready event using jQuery:

$(document).ready(function(){
  //initialize progress bar on a page
  RadialBar.createBar();
  
  //set styles
  RadialBar.style({"diameter": "200pt",
                   "backgroundColor": "transparent",
                   "emptyStrokeColor": "#ccc",
                   "fillStrokeColor" : "#00ccff",
                   "fillStrokeWidth" : "2pt",
                   "percentagesFontSize": "20pt",
                   "percentagesFontColor": "#777",
                   "descriptionFontSize": "9pt",
                   "descriptionFontColor": "#aaa"});
  
  //set percentage and label
  RadialBar.set(42, "Loading...");
});