Note: You'll need an HTTP server with PHP running on your local machine to do this. Don't try this with your website over the Internet, unless you don't mind waiting for tons of images to upload... Also, I recommend using Chrome for best results.
Let's start with our simple animation. You can see it in action here.
This tutorial will explain how to make an animated "add to queue" type functionality with jQuery. Since it is hard to explain the results, check out the demo. First, I'll show how to create the actual effect, and then how to implement AJAX submission to a back-end script for database storage or some other processing.
jQuery supports all major browsers, has a small file size, and is used by major websites such as Google! Here is the description from their website:
I came across this handy online tool that generates animated "loading images" for use with AJAX (or anything else): http://www.ajaxload.info/
You can choose from a selection of styles, set background and foreground colors, click generate, and you have your image. It's a real time saver for AJAX applications, and the best part is that they are free to use for anything!
An AJAX application is a web page that functions more like a desktop application than a traditional web page in that it feels more responsive. It works by transferring small pieces of information in the background and updating just the affected area of the page without reloading the whole thing. This not only speeds up web applications and lowers bandwidth consumption, it also increases end-user enjoyability. As AJAX becomes more popular, the gap between the Internet and desktop applications will become increasingly smaller.
Note: Please check out this updated tutorial for creating an upload progress bar. This tutorial is outdated and may not produce the desired effect.
In this tutorial I will explain how to create a progress bar for PHP file uploads. There is no method built into PHP for returning the status of an upload in progress, so this requires a module called the Alternative PHP Cache (APC). This allows you to store data across sessions and includes built-in functionality for storing/returning file upload stats.