Icontem

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

Recommend this page to a friend!

  Author Author  
Name: Robert Haddad <contact>
Classes: 2 packages by
Country: Jordan Jordan
Age: 36
All time rank: 751 in Jordan Jordan
Week rank: 47 Up1 in Jordan Jordan Equal
Innovation award
Innovation award
Nominee: 1x

Winner: 1x


  Detailed description   Download Download .zip .tar.gz   Install with Composer Install with Composer  
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.

Details
{startverticalbanner}
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; 

  Classes of Robert Haddad  >  JQuery Bar Gauge  >  Download Download .zip .tar.gz  >  Support forum Support forum  >  Blog Blog  >  RSS 1.0 feed RSS 2.0 feed Latest changes  
Name: JQuery Bar Gauge
Base name: jquery_bargauge
Description: jQuery plugin to animate a progress gauge bar
Version: 1.0.0
JavaScript version: 1.0
License: MIT/X Consortium License
All time users: 185 users
All time rank: 255
Week users: 0 users
Week rank: 37 Equal
 
  Groups   Rate classes User ratings   Applications   Files Files  

  Groups  
Group folder image Animation Animation effects View top rated classes
Group folder image HTML HTML generation, editing and parsing View top rated classes
Group folder image jQuery Components that extend the jQuery framework View top rated classes


  User ratings  
Not yet rated by the users

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.

  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

Install with Composer Install with Composer - Download Download all files: jquery_bargauge.tar.gz jquery_bargauge.zip
NOTICE: if you are using a download manager program like 'GetRight', please Login before trying to download this archive.