Creating An Animated Speedometer with jQuery and CSS3

A jQuery plugin helps you create an animated & highly customizable speedometer representing the number you type into an input field.

Based on jQuery and CSS3 transitions & transforms. No image needed.

See Also:

• 10 Best Gauge Plugins In jQuery And Pure JavaScript/CSS

How to use it:

1. Include the jQuery library together with speedometer.css and speedometer.js in the document.

<link href="css/speedometer.css" rel="stylesheet">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/speedometer.js"></script>

2. Create an input field in the document.

<input id="demo">

3. Initialize the plugin. The plugin will automatically render a speedometer appending to the input you just created.

$("#demo").speedometer({
  divFact:10
});

4. All the default settings.

$("#demo").speedometer({

  /**Max value of the meter*/
  maxVal              : 180,         

  /**Division value of the meter*/
  divFact             : 10,          

  /**more than this leval, color will be red*/
  dangerLevel         : 120,         

  /**reading begins angle*/
  initDeg             : -45,         

  /**total angle of the meter reading*/
  maxDeg              : 270,         

  /**radius of the meter circle*/
  edgeRadius          : 150,         

  /**speed nobe height*/
  speedNobeH          : 4,           

  /**speed nobe width*/
  speedoNobeW         : 95,          

  /**speed nobe left position*/
  speedoNobeL         : 13,          

  /**radius of indicators position*/
  indicatorRadius     : 125,         

  /**radius of numbers position*/
  indicatorNumbRadius : 90,          

  /**speedo-meter current value cont*/
  speedPositionTxtWH  : 80,          

  /**indicator nob width*/
  nobW                : 20,          

  /**indicator nob height*/
  nobH                : 4,           

  /**indicator number width*/
  numbW               : 30,          

  /**indicator number height*/
  numbH               : 16,          

  /**indicator mid nob width*/
  midNobW             : 10,          

  /**indicator mid nob height*/
  midNobH             : 3,           

  /**no of small div between main div*/
  noOfSmallDiv        : 2,           

  /**type of event listener*/
  eventListenerType   : 'change',    

  /**Center value multiplier e.g. 1 x 1000 RPM*/ 
  multiplier          : 1,         

  /**Label on guage Face*/ 
  gagueLabel    : 'km/h'     
    
});

Changelog:

2022-07-11

• JS Update

2022-07-07

• JS Update

2021-06-24

• JS Update

2021-03-16

• JS Update

2018-03-15

• CSS update

2016-11-18

• Missing object reference for chaining

2016-08-26

• JS update

---

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