The AwsmProgressBar is an all-in-one-file plug-in for jQuery that lets you create a stunning progressbar. More than thirteen options and five methods allow to customize the progressbar to your needs. It works with CSS3-animations and all major browsers. The AwsmProgressBar is useful when a state, its progress or transitions between states should be communicated to the user.

Updates

• Update v1.3: Increased browser compatibility (especially IE10+)
• Update v1.2: CSS3-transistions are now fully supported in Opera 12+.
• Update v1.1a: Fixed a bug with the texture-free background and added the option to supply an own aspect ratio (rather than the default one of 100:15). The demo has been updated as well.

Features

• CSS3-animations with fallback to gifs for older browsers
• dynamic progress- and colour-animations, 4 different states
• 10 adjustable options and 4 customizable colours
• adapts to the screen size, even when the window is resized
• easy integration, only needs jQuery 1.4 or later

The demo-page contains a fully working example and the whole documentation.

Browser compatibility (as of July 2013)

Desktop browsers	Mobile browsers
Tested:	Test yourself:
Firefox 8+ Chrome 11+ Internet Explorer 10+ ( versions prior to 10 fall-back to the GIF-animation ) Safari 5.1+ Opera 12.10+	iOS 3 Safari 3.2+ (iPad, iPhone, iPod) Blackberry Browser 7+ Opera Mobile 12.1+ Chrome for Android 27+ Firefox for Android 22+

The extent of the plug-in spannes the JavaScript source code, one stylesheet and four graphics. Two graphics are in jpeg- and the other two files in the gif-format (animated). They are used for the inner background of the progressbar and come in a normal-sized and a small version.

The animated gifs come as a fallback solution, in case the user’s browser does not support CSS3-animations. The developer can also decide to use gifs as default background to preserve some computing power, as those animations can consume a lot of it.

The AwsmProgressBar allows for 12 different options it can be initialized with. Those properties can be changed at any time later. Four different customizable colours allow the developer to adapt the look to the surrounding page (colours can be set for the four states indetermined, working, inactive and finished).

Getters and setters as well as a method to destroy the plug-in are available.

The package comes in two versions. The first is an all-in-one-file package. It is a stand-alone JavaScript-file that includes all the minified source code, all CSS-styles and all images as base64-data-URL’s. This version only depends on jQuery and must be loaded after it. The complete file has a total size of ~55 kilobytes. The second version has all these files externalized, so that the developer can load and combine them manually.

codecanyon-2598901-awsmprogressbar-for-jquery.zip