WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Loaders and Uploaders

AwsmProgressBar for jQuery

— Add-On to WorldWideScripts.net

Subscribe to our feed to stay up to date!

New! Follow us as you want it!


AwsmProgressBar for jQuery - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting
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.


Download
Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers

Properties

Created:
4 July 12

Last Update:
24 July 13

High Resolution:
No

Compatible Browsers:
IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS

Software Version:
jQuery

Keywords

eCommerce, All Items, animation, css3, css3 animation, css3 scrollbar, javascript, jquery, loader, progress, progressbar, scrollbar, state, transition