Minimal Gauge Plugin With jQuery And CSS3 - cmGauge

cmGauge is a jQuery plugin which lets you create a minimal clean gauge widget to present the percentage value using pure JavaScript and CSS. Allows to smoothly update the gauge using CSS3 transitions and transforms.

How to use it:

1. To get started, include the jQuery library and the cmGauge plugin's source files into your HTML document.

<link rel="stylesheet" href="css/cmGauge.css">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/cmGauge.js"></script>

2. The HTML structure to create the gauge widget and specify the current percentage value in the data-percentage attribute as shown below:

<div id="gaugeDemo" class="gauge gauge-big gauge-green">
  <div class="gauge-arrow" data-percentage="40"
       style="transform: rotate(0deg);"></div>
</div>

3. To create a tiny gauge widget, just replace the CSS class 'gauge-big' with 'gauge-small':

<div id="gaugeDemo" class="gauge gauge-small gauge-green">
  <div class="gauge-arrow" data-percentage="40"
       style="transform: rotate(0deg);"></div>
</div>

4. Initialize the plugin and done.

$('#gaugeDemo .gauge-arrow').cmGauge();

5. Update the gauge programmatically:

$('#gaugeDemo .gauge-arrow').trigger('updateGauge', NewValue);

Change log:

2017-03-02

• bugfix

---

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