JQuery Bar Gauge: jQuery plugin to animate a progress gauge bar

Recommend this page to a friend!
  Info   View files View files (8)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2014-04-20 (6 years ago) RSS 2.0 feedNot enough user ratingsTotal: 192 All time: 256 This week: 6Up
Version License JavaScript version Categories
jquery_bargauge 1.0.0MIT/X Consortium ...1.0Animation, HTML, jQuery
Description Author

This is jQuery plugin to display an animated progress gauge bar.

It can show a progress bar inside a given HTML page container element with a given width and height.

The plug-in can animate the bar going from the current position to another position as goal.

The number value of the current position can be displayed with the progress bar formatted with a configurable number of decimal places.

  Performance   Level  
Name: Robert Haddad <contact>
Classes: 2 packages by
Country: Jordan Jordan
Age: 40
All time rank: 751 in Jordan Jordan
Week rank: 11 Up1 in Jordan Jordan Equal
Innovation award
Innovation award
Nominee: 1x

Winner: 1x


Small jQuery Plugin to display a Progress / Bar Gauge


Include in Head Tag:

&lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt; &lt;/script&gt;

&lt;script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"&gt; &lt;/script&gt;

&lt;script type="text/javascript" src="js/jquery.BarGauge.js"&gt; &lt;/script&gt;

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(css/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
  toolTip: ''				// If set, this will use jQuery Tooltip



&lt;div id="demo1" class="barGauge_container" &gt;&lt;/div&gt; 
  Files folder image Files  
File Role Description
Files folder imagecss (1 directory)
Files folder imagejs (1 file)
Accessible without login Plain text file BarGauge.jquery.json Data Auxiliary data
Accessible without login Plain text file demo.html Example Documentation
Accessible without login Plain text file README.md Doc. Auxiliary data

  Files folder image Files  /  css  
File Role Description
Files folder imageBarGauge (4 files)

  Files folder image Files  /  css  /  BarGauge  
File Role Description
  Accessible without login Image file bar_graph-colorScale.png Data Auxiliary data
  Accessible without login Image file bar_graph-gradient.png Data Auxiliary data
  Accessible without login Image file bar_graph.png Data Auxiliary data
  Accessible without login Plain text file jquery.BarGauge.css Data Auxiliary data

  Files folder image Files  /  js  
File Role Description
  Plain text file jquery.BarGauge.js Class Class source

 Version Control Unique User Downloads Download Rankings  
This week:0
All time:256
This week:6Up