AwsmProgressBar for jQuery

The AwsmProgressBar is an all-in-one-report plug-in for jQuery that permits you to create a shocking progressbar. greater than thirteen choices and 5 methods permit to customize the progressbar in your wishes. it works with CSS3-animations and all top browsers. The AwsmProgressBar comes in handy while a state, its growth or transitions between states have to be communicated to the person.

Updates

• Replace v1.3: Greater browser compatibility (particularly IE10+)
• Update v1.2: CSS3-transistions are now totally supported in Opera 12+.
• Update v1.1a: Fixed a malicious program with the texture-loose background and delivered the choice to supply an personal aspect ratio (instead of the default one of 100:15). The demo has been updated to boot.

Options

• CSS3-animations with fallback to gifs for older browsers
• dynamic growth- and color-animations, 4 other states
• 10 adjustable choices and 4 customizable colors
• adapts to the display dimension, even when the window is resized
• easy integration, simplest wishes jQuery 1.4 or later

The demo-web page includes a fully working example and the entire documentation.

Browser compatibility (as of July 2013)

Desktop browsers Mobile browsers Examined: Test your self:

• Firefox EIGHT+
• Chrome 11+
• Internet Explorer 10+
  ( variations previous to 10 fall-back to the GIF-animation )
• Safari 5.1+
• Opera 12.10+

• iOS THREE Safari THREE.2+ (iPad, iPhone, iPod)
• Blackberry Browser 7+
• Opera Cellular 12.1+
• Chrome for Android 27+
• Firefox for Android 22+

The Level of the plug-in spannes the JavaScript source code, one stylesheet and 4 graphics. Two photographs are in jpeg- and the other recordsdata within the gif-layout (lively). They Are used for the interior heritage of the progressbar and come in a regular-sized and a small model.

The animated gifs come as a fallback answer, in case the person’s browser does not make stronger CSS3-animations. The developer too can decide to use gifs as default historical past to preserve some computing energy, as the ones animations can eat so much of it.

The AwsmProgressBar allows for 12 other options it could possibly be initialized with. The Ones properties will also be modified at any time later. Four other customizable colors permit the developer to adapt the look to the encircling web page (colors can also be set for the 4 states indetermined, running, inactive and finished).

Getters and setters besides as a method to break the plug-in can be found.

The package comes in two versions. the primary is an all-in-one-report package deal. it is a stand-on my own JavaScript-report that comes with all the minified source code, all CSS-types and all pictures as base64-knowledge-URL’s. This version handiest depends upon jQuery and should be loaded after it. the complete document has a complete measurement of ~55 kilobytes. the second model has these kinds of information externalized, so that the developer can load and mix them manually.

FULL DOWNLOAD