Spin.js makes Animated Gifs Old School

  • Article

In most web apps, when an Ajax request is done, developers will use an animated gif image (AKA Throbber) to give the user an indication that something is going on. Throbbers come in many forms from circles to bars and even animated logos. The key thing is that they all required an image to be loaded and rendered to the user.

Spin.js is a new library that aims to cut out the need for images. Created by Felix Gnass, Spin.js uses CSS3 and JavaScript to render the indicator. For versions of IE that don't support CSS3, the lib falls back to using VML to render the UI. Here's how you'd setup a simple throbber:

 var opts = {
  lines: 12, // The number of lines to draw
  length: 7, // The length of each line
  width: 5, // The line thickness
  radius: 10, // The radius of the inner circle
  color: '#000', // #rbg or #rrggbb
  speed: 1, // Rounds per second
  trail: 100, // Afterglow percentage
  shadow: true // Whether to render a shadow
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

The great thing is the broad browser suppoer with Spin.js being successfully tested in:

  • Chrome
  • Safari 4+
  • Firefox 3.5+
  • IE 6,7,8,9+
  • Opera 10.6+
  • Mobile Safari (iOS 4)

Be sure to visit the demo page so you can use the interactive builder to see how the throbber can be dynamically adjusted based on small adjustments.