Outlook-style loading indicator for jQuery

• Download sample - 33 KB

Introduction  

Tired of spinning GIFs? Have you seen that nice loading indicator in outlook.com? It is also used by some metro apps in Microsoft Windows 8. And now you can have it nice and easy in your webpages. 

• Download sample  

Using the code

You need to reference the jQuery script in your HTML page: 

<script src="jquery-1.9.1.min.js"></script> 

And of course the script for this plug-in: 

<script src="loader.js"></script> 

Once you have that in place, you can invoke loader on any div element:  

$('.loader').loader();  

This is the default call. You can also use these options: 

• boxes: Number of boxes (or bullets) that are engaged in the indicator (defaults to 5).
• dimensions: The dimensions (height and width) for each box or bullet (defaults to 6).
• radius: value for the border-radius css option assigned to each box. Make this 0 and have boxes instead of bullets (defaults to 25). 
• interval: The amount of time it takes for the indicator to complete one round (defaults to 3 seconds). 
• color: color of the boxes of bullets (defaults to white). 

A customized call would look like this: 

$('.loader').loader({color: '#000', radius: 0}); 

And finally, once you are done loading your content you can use this method to clear out the indicator: 

$('.loader').clearLoader();