Click here to Skip to main content
Click here to Skip to main content

Outlook-style loading indicator for jQuery

By , 27 Mar 2013
Rate this:
Please Sign up or sign in to vote.

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. 

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();

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Vahid Tavana

Iran (Islamic Republic Of) Iran (Islamic Republic Of)
No Biography provided

Comments and Discussions

 
GeneralGreat Plugin Pinmembernipunasilva27-Mar-13 4:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 27 Mar 2013
Article Copyright 2013 by Vahid Tavana
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid