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    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 194 All time: 257 This week: 5Up
Version License JavaScript version Categories
jquery_bargauge 1.0.1MIT/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.

Picture of Robert Haddad
  Performance   Level  
Name: Robert Haddad <contact>
Classes: 2 packages by
Country: Jordan Jordan
Age: 42
All time rank: 771 in Jordan Jordan
Week rank: 6 Up1 in Jordan Jordan Equal
Innovation award
Innovation award
Nominee: 1x

Winner: 1x

BarGauge ======== Small jQuery Plugin to display a Progress / Bar Gauge Usage: ====== 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: $('#demo1').BarGauge({ 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 }); HTML: &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:257
This week:5Up