It is important to give users feedback when something is happening in the background on your page, such as a file upload or Ajax call. If you know how far towards completion you are then a progress bar may be the way to go, but for cases where you do not have this feedback, an Spinner Activity Indicator is the best way to go.
Step by Step
Felix Gnass has set up a very nice Configuration Page for spin.js which lets you vary all the options and see what the effect is. Once you have the spinner set up just the way you want, you can can copy and paste the option values into your own code.
Understanding the Code
The .spinner class in the style block positions the spinner in the center of the page, regardless of its size.
The opts hash in the script specifies what the spinner will look like. Copy and Paste options from the configuration page, or try varying values here. The default spinner looks like the one Apple uses on the iPhone, etc.
This demo uses jQuery to set up the buttons, but the spin.js here does not. There is a jQuery version available if you want to try that. There is no real need to though.
The start button has a function bound to the click event. The first time it is invoked it creates a new Spinner and starts it, otherwise it starts the existing spinner.
The stop button has a corresponding function which stops the spinner, both act on the DOM element spinner_div (not the jQuery element).
In a real application you might start the spinner when an AJAX call is invoked and then stop it when the success callback is invoked.
spin.js is a great example of code that is simple, does what you want and just works.
- Spinkit - by Tobias Ahlin - very slick - nice clean design