Customizable Radial Progress Bar Plugin With jQuery

File Size: 6.43 KB
Views Total: 23476
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Customizable Radial Progress Bar Plugin With jQuery

Radial Progress Bar is a lightweight jQuery plugin that uses plain HTML and CSS to draw animated, highly customizable, circular progress bars to visualize your percentage values.

How to use it:

1. Just include both jQuery library and the jQuery radial progress bar plugin at the bottom of the webpage and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="radial-progress-bar.js"></script>

2. Render a default radial progress bar. Blue progress bar, semi-transparent background path, 40px progress text in the center. Subsequent percentage settings can be queued.

jQuery("#container").radialProgress("init", {
  'size': 100,
  'fill': 5
}).radialProgress("to", {'perc': 100, 'time': 10000});

3. Render a bar chart like progress bar. Multiple radial progress bars layered on top and offsetted by each other. Values are visible in the center as a list. Data is loaded in initialization.

jQuery("#container").radialPieChart("init", {
  'font-size': 13,
  'fill': 20,
  'data': [
    {'color': "#2DB1E4", 'perc': 33},
    {'color': "#9CCA13", 'perc': 33},
    {'color': "#A4075E", 'perc': 33}
  ]
});

4. Render concentric bars. Multiple radial progress bars in concentric circles around each other. Defined as regular radial progress bar, empty on init, each bar can be set separately or together. With ranges and periodic updates the clock on the left can be easily created.

var clock = jQuery("#container").radialMultiProgress("init", {
  'fill': 25,
  'font-size': 14,
  'data': [
    {'color': "#2DB1E4", 'range': [0, 12]},
    {'color': "#9CCA13", 'range': [0, 59]},
    {'color': "#A4075E", 'range': [0, 59]}
  ]
});

var startClock = function() {
  var dh, dm, ds;
  setInterval(function() {
    var date = new Date(),
        h = date.getHours() % 12,
        m = date.getMinutes(),
        s = date.getSeconds();
    if (dh !== h) { clock.radialMultiProgress("to", {
      "index": 0, 'perc': h, 'time': (h ? 100 : 10)
    }); dh = h; }
    if (dm !== m) { clock.radialMultiProgress("to", {
      "index": 1, 'perc': m, 'time': (m ? 100 : 10)
    }); dm = m; }
    if (ds !== s) { clock.radialMultiProgress("to", {
      "index": 2, 'perc': s, 'time': (s ? 100 : 10)
    }); ds = s; }
  }, 1000);
};

startClock();

5. Render the progress bar as an inline icon.

jQuery("#container").radialProgress("init", {
  'size': 20,
  'fill': 2,
  'text-color': "transparent"
}).radialProgress("to", {'perc': 66});

6. Plugin's default settings.

"inline": true,
"font-size": 40,
"font-family": "Helvetica, Arial, sans-serif",
"text-color": null,
"lines": 1,
"line": 0,
"symbol": "",
"margin": 0,
"color": "rgb(55,123,181)",
"background": "rgba(0,0,0,0.1)",
"size": $obj.outerWidth(),
"fill": "5px",
"range": [0, 100]

Changelog:

2022-04-01

  • add camelcase options

This awesome jQuery plugin is developed by aorcsik. For more Advanced Usages, please check the demo page or visit the official website.