Smooth Progress Gauge Plugin With jQuery And CSS3 - simpleGauge.js

simpleGauge.js is a small jQuery plugin which lets you create minimal, clean, smooth gauge meters to represent percentage values on the webpage. Licensed under the GNU GPL.

Built with plain JavaScript and CSS3 transforms. No SVG or Canvas needed. Suitable for building virtual dashboards, speedometers, gauge charts, semicircular progress bars, etc.

How to use it:

1. To use this plugin, include the following JavaScript and CSS files on the webpage after loading jQuery library.

<link rel="stylesheet" href="simpleGauge.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="simpleGauge.js"></script>

2. Create a container element for the gauge meter and define the percentage value in the data-value attributes as follows:

<div class="gauge-wrap" data-value="10"></div>
<div class="gauge-wrap" data-value="90"></div>
...

3. Attach the plugin to the gauge containers. Done.

$(function() {

  $('.gauge-wrap').simpleGauge();

});

4. Customize the gauge meters by overriding the optional settings as displayed below:

• width: Width of gauge.
• hueLow: Choose the starting hue for the active color (for value 0)
• hueHigh: Choose the ending hue for the active color (for value 100)
• saturation: Saturation for active color
• lightness: Lightness for active color
• gaugeBG: Background color of Gauge
• parentBG: This color should match the parent div of the gauge (or beyond)

$('.gauge-wrap').simpleGauge({
  width: '200',
  hueLow: '1', 
  hueHigh: '128', 
  saturation: '100%', 
  lightness: '50%',
  gaugeBG: '#1b1b1f', 
  parentBG: '#323138'
});

---

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