A free jQuery Plugin with GaugeMeter.js is provide animated meters and dials with plenty of customization options. A beautiful and fully customizable animated gauge meter built with jQuery and CSS3. GaugeMeter is highly customizable and includes radial, semi-radial and arch dials.
Table of Contents
Main features:
- Canvas based. No png or jpg required.
- Simple and lightweight (~6kb).
- Highly customizable and styleable.
- 16 built-in themes.
- Custom legends & labels.
- Displays either a full circle, semi-circle or an arched-circle.
Basic usage:
Add the jQuery GaugeMeter.js plugin after the jQuery library.
<script src="jquery-3.3.1.min.js"></script>
<script src="GaugeMeter.js"></script>
Create a basic gauge meter with html data attributes.
<div class="GaugeMeter"
data-percent="60"
data-label="Percent">
</div>
Apply custom CSS styles to the gauge meter animation.
.GaugeMeter {
position: Relative;
text-align: Center;
overflow: Hidden;
cursor: Default;
display: inline-block;
}
.GaugeMeter SPAN, .GaugeMeter B {
width: 54%;
position: Absolute;
text-align: Center;
display: Inline-Block;
color: RGBa(0,0,0,.8);
font-weight: 100;
font-family: "Open Sans", Arial;
overflow: Hidden;
white-space: NoWrap;
text-overflow: Ellipsis;
margin: 0 23%;
}
.GaugeMeter[data-style="Semi"] B {
width: 80%;
margin: 0 10%;
}
.GaugeMeter S, .GaugeMeter U {
text-decoration: None;
font-size: .60em;
font-weight: 200;
opacity: .6;
}
.GaugeMeter B {
color: #000;
font-weight: 200;
opacity: .8;
}
Add code for Initialize the plugin.
$(".GaugeMeter").gaugeMeter();
Done
Thanks for make jQuery plugin is developed by Mictronics For more Helpfull for users, please check the demo page or visit the official website.
