Create Web 2.0 Progress Bars: jQuery, DHTML, JS, CSS, Photoshop

Tagged:  

Progress bars are extremely usefull in Ajax applications as it lets people know when you are loading information in the background. Well the DeveloperFox blog has put together a nice list of progress bars using jQuery, JavaScript, CSS and PhotoShop.

Below is an excerpt from the post.

jQuery Progress Bars

jQuery.UI ProgressBar Widget

1

HOWTO: PHP and jQuery upload progress bar

2

jqUploader

“jqUploader is a jquery plugin that substitutes html file input fields with a flash-based file upload widget, allowing to display a progressbar and percentage. It is designed to take most of its customization from the html code of your form directly - so you don’t have to do things twice . For instance, the maximum file size, if specified via html, will be recognized and used in the rich upload interface generated by jqUploader.

The plugin uses the form action attribute value (normally pointing to a server side script handling the upload and other data manipulations, and appends a variable “jqUploader=1? so that the upload code is initiated when it sees that key/value is on the posted data.”

3

Progress Bar Plugin

This is a progress bar plugin for jQuery.

4

To read the full post click here.

These are some really helpful jquery tricks. I'm currently in the process of learning jquery and although I don't really need a progress bar, this tut has given me a better understanding of how the language works.

[...] saved by asmull2009-03-08 - Weekly Flash tutorial roundup #4 saved by rockinjudith2009-03-06 - Create Web 2.0 Progress Bars: jQuery, DHTML, JS, CSS, Photoshop saved by DElibraries2009-02-17 - The Big Four-Zero saved by aurbieta2009-02-12 - progress bar help. [...]

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.