Creating A Dynamic Speedometer with jQuery and TweenLite - Speedometer

Vroom is a jQuery & TweenLite based gauge plugin for creating a realistic speedometer that dynamically updates according to user inputs.

See also:

• Creating An Animated Speedometer with jQuery and CSS3

How to use:

1. Include the required JavaScript libraries on your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/plugins/CSSPlugin.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/easing/EasePack.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenLite.min.js"></script>

2. Create the Html for the speedometer.

<div id="gauge">
  <div id="circle"></div>
  <div id="numbers"></div>
  <div id="mi-km"></div>
  <div id="needle"></div>
</div>

3. Create text fields to accept user input.

<div id="left">
  <div>
    <label for="miles">Miles:</label>
    <input type="text" name="miles" id="miles">
  </div>
  <div>
    <label for="kilometers">Kilometers:</label>
    <input type="text" name="kilometers" id="kilometers">
  </div>
  <p id="errmsg"></p>
</div>

---

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