Click the buttons to start or stop a progress indicator, depending on its current state. They're not animated .gifs, but sequences of .png images - so no jagged edges, and they look good on any background. Starting a large or small indicator is just a case of passing "small" or "large" to the function.
You'll need to incorporate the following 4 things into your project:
The CSS and HTML files are only a couple of lines, you'd be best to roll them into your existing files; as for the javascript file, either incorporate it into your own files or reference it, your call.
Usage is easy - include an image with an id in your project, and then call startProgressIndicator('size_required','image_id') when you want to start it. The values default to a size of "large" and an id of "progress_indicator" if not specified. When you want to stop the indicator, call stopProgressIndicator().
Whilst you can have multiple progress indicators placed in the document - as here - by placing multiple images with unique ids, it's currently only possible to have one active at any one time; this is due to the limitations of setInterval(). It would be perfectly possible to hard-code multiple timer variables and if-then clauses to check if they're busy or free to allocate; but that's hardly pretty code, and doesn't possess the infinite extendibility and simplicity that is desirable in a utility such as this. Besides, if you need more than one indicator running at once, you probably need to rethink your GUI!