The AwsmProgressBar is an all-in-one-file plug-in for jQuery that lets you create a stunning progressbar. More than twelve 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.
- CSS3 -animations with fallback to gifs for older browsers
- dynamic progress- and colour-animations, 4 different states
- 12 adjustable options
- 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.
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.