Animated Gauge Meter Plugin With jQuery / HTML5 – GaugeMeter.js

Chart
File Size: 5.95 KB
Views Total: 171 views
Last Update:July 22, 2022
Publish Date: February 10, 2018
Official Website: Go to website
License: MIT
Plugin Author: Mictronics
Demo    Download

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.

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

List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins