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.
- 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.
- 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|
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.