We use loading indicator images and popups to show our users when something is happening within BranchCMS. They are good design patterns to use as they let you know that something is going on and it's ok to wait a few seconds. For example, we use them when saving pages or when loading a new page to edit. 

We have been incrementally updating the UI across BranchCMS and decided that it was time to give a little love to the loading indicators. 

What we used to do

In the past we either used the jQuery BlockUI plugin or an animated GIF to show that something was happening. Those were good at the time but it got to the point that the plugin was just another thing to update and to be honest, the animated GIF was just a little boring. 

Enter the awesomeness of SpinKit

We wanted to do something different and we didn't want to just have another animated GIF. We thought it would be cool to do something with just CSS. We don't support IE 8 or 9 so their lack of support for CSS animations isn't a concern for us. We went in search of some inspiration and we came across a cool set of animations by Tobias Ahlin called SpinKit. With a few divs and some awesome CSS animations Tobias created 11 different cool animated loading indicators. We decided that these would be the loading indicators that we'd use.

We setup a test page to test out all the icons and to be honest, we had a hard time picking which one to use. So we simply decided to implement them all. 

All of the loading indicators are setup using Javascript so we wrote a simple little function that will randomly return the HTML for one of the 11 loading indicators. Now, go save a bunch of stuff so that you can see them all!