Minimal Gauge Plugin With jQuery And CSS3 - cmGauge
File Size: | 4.37 KB |
---|---|
Views Total: | 19400 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.