Tutorial #27
spin.js Activity Indicator Intermediate   2013-11-26

Introduction

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.

There are many of these available but my preference is spin.js written by Felix Gnass. It is simple, looks great and requires no images.

Demo 1 screenshot for this tutorial


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.

Image 1 for this tutorial

Image 2 for this tutorial


Understanding the Code

The first step is to download spin.js or the minified version into a location that your page can acces it. On the demo servers this is public/javascript/spin.js.

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.


Alternatives


Code for this Tutorial


Share this tutorial



Comment on this Tutorial


comments powered by Disqus