View on GitHub


Small jQuery Plugin to display a Progress / Bar Gauge

Download this project as a .zip file Download this project as a tar.gz file

Welcome to BarGauge.

This is a small jQuery Plugin to display a Progress Bar or Bar Gauge. It fairly easy to use.


Demo 1

Demo 2

Demo 3


Include in Head Tag:

<script type="text/javascript" src=""></script>

<script type="text/javascript" src=""></script>

<script type="text/javascript" src="javascripts/jquery.BarGauge.js"></script>

JavaScript / jQuery:


  color: "#00C",           // Color of the Progress / Gauge Bar 

  backgroundColor: "#FFF",     // Background color of Progress / Gauge Bar

  width: "754px",      // Default width of Bar (Original Graphic Size of faceplate)

  height: "72px",      // Default height of Bar

  value: 0.01,             // Value of Bar Gauge (Current Position)

  goal: 1.00,          // Goal of Bar Gauge (Maximum Position)

  title: "BarGauge",       // Default Title of Bar Gauge

  showTitle: true,         // If True show title

  value_before: "",        // Default Value before text I.E. $1,000

  value_after: "",         // Default Value Text end text I.E 1,000 USD

  showValue: true,         // If True Show the value field in the Gauge Bar

  valueColor: '#3cff00',       // Default Value Color 

  faceplate: "url(stylesheets/BarGauge/bar_graph.png) no-repeat", // Default locaiton of faceplate graphic other options (bar_gra
ph(colorScale).png and bar_graph(gradient).png)
  animSpeed: 400,      // Animation Speed can be string "slow","fast",etc... Or Integer

  animType: "swing",       // Animation Type (jQuery Animation Methods)

  decPlaces: 2,            // Default decimal places on the text field when showing value

  thouSeparator: ',',      // Default Thousands seperator I.E. 1,000 or 1.000

  decSeparator: '.'        // Default Decimal Separator I.E. 0.001 or 0,001



<div id="demo1" class="barGauge_container"></div>

Authors and Contributors

This Plugin was created by Robert Haddad (SmokinPuppy)in 2014.

Support or Contact

Having trouble with this plugin? Check out the documentation at or contact and I’ll help you sort it out.