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

Chart
Customizable & Animated jQuery HTML5 Gauge Meter Plugin
File Size: 5.95 KB
Views Total: 2239 views
Last Update:March 13, 2024
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

Thanks for make jQuery plugin is developed by Mictronics For more Helpfull for users, please check the demo page or visit the official website.
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