Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

Mobile Web: Create an SVG Loading Spinner

by

This tutorial will guide you through the development of a simple SVG loading spinner for use on mobile web sites. Visual indicators like the spinner built in this tutorial are used to indicate background-thread activity and are a crucial part of strong user experience design!


Prerequisites

This tutorial is assumes that you already have basic knowledge in Scalable Vector Graphics (SVG), HTML, CSS, JavaScript, and jQuery. However, the content is presented in a step-by-step fashion that should be easy enough to follow along.

What about Raphaël? We will use the Raphaël project for performing the SVG drawing in this tutorial. To quote from the official Raphaël project web site:

Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

To use Raphaël in your project, you just need to follow these steps:

  1. Import the library into your webpage.
  2. Create the raphael object, passing the id of the div where your SVG will be drawn, like so:
  3. Create the elements you need into the recently created raphael object, for example:

Enough theory! Let's start coding!


Step 1: Page Creation with HTML

Let's start by first building our demo page in HTML. It should look like the following:

Last, but not the least, we add a link where you can click to "unleash" the spinner (i.e. begin the spinning animation).


Step 2: CSS Styling

Now that we have our markup ready, we need to begin filling in the missing style.

In terms of CSS, the outermost div (i.e. id="spinnerFullScreen") must be black and occupy the whole screen on top of all elements that don't belong to the spinner.

The other two divs (i.e. id="floater" and id="spinner") uses a slight "hack" in order to properly center the spinner in the middle of the screen no matter what the screen size is or where the scroll is set. I will not explain it on this tutorial since the CSS only relates to a "dummy" demo page, not the central purpose of this tutorial.

In the end, the spinner.css file should look like this:


Step 3: Adding Behavior with JavaScript

In theory, our spinner is composed of a certain number of sectors (8 in the image) that have a length ("sectorLength") and a width ("sectorWidth"). Of course, these sectors have a distance to the center as well ("centerRadius").

Spinner math

But is this static? And what about the animation? Well, the animation is just a little trick: having all the sector opacities ranging from 0.0 to 1.0, we continuously change the opacity of each sector to be equal to the opacity of the next sector. Confused? It will likely become more transparent once you see the implementation in JavaScript.

In order to create a reusable library, we will use an Object Oriented paradigm implemented in JavaScript. The library is built around a constructor (function Spinner(data)) and two distinct functions:

  • create – using the instance variables defined in the constructor, it builds the SVG spinner and animates it as well.
  • destroy – destroys the SVG spinner and hides the full screen view.

In the spinner.js file created previously, we first create the constructor of the Spinner, enabling the user of the library to set some values like the number of sectors, the distance of the sectors to the center, and so forth.

Now on to the biggest method of the spinner object, the create method. This method is called every time the user wants to show the spinner. Note the use of jQuery to select our elements. This is where the id's we talked about above come in:

Continuing along with the create method, we do some initial calculations, like the total size of the spinner, and prepare the Raphael object to draw the sections:

Next is the drawing of the cycle and the building of an array with the current opacity of each sector:

Now that we have our spinner built and displayed, we need to animate it. This is the last part of the create method:

Finally, the destroy method of our spinner:


Step 4: Unleash the power!

With the spinning code in place, it's now time to attach an event to the link, so that when the user clicks it, we show the spinner for a 6 second interval. Personally, I use this for asynchronous requests to the server, and when the request is over I simply remove the spinner.

Note that this code can only be used after all the libraries that the spinner depends on are loaded. You can add this code in the end of the spinner.js file or in another JavaScript file if you want to keep the spinner.js file independent and reusable for other projects.

We can reuse the spinner variable as many times as we want.


Wrap Up

The spinner demonstrated in this tutorial can be used in web pages designed not only for mobile devices, but also for "normal" web pages. I already tried this with both methods, and it worked just fine!

In order to test your knowledge, you can work on improving the current spinner implementation in a few unique ways. For instance, you could try changing the format/shape of the sections, enabling clockwise or anti-clockwise movement, or enable a developer to pick any id for the spinner in order to avoid id clashes.

That's it for this time. I hope you enjoyed this tutorial!

Advertisement