Creating An Animated Speedometer with jQuery and CSS3

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.

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="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/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").myfunc({divFact:10});

4. All the default settings.

$("#demo").myfunc({
  /**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'     
    
});

Change log:

2018-03-15

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.

  • Publication date: 15.03.2018
  • Source