Click here to Skip to main content
11,924,825 members (54,143 online)
Click here to Skip to main content
Add your own
alternative version


6 bookmarked

Outlook-style loading indicator for jQuery

, 27 Mar 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
A loading bar as seen on for jQuery.


Tired of spinning GIFs? Have you seen that nice loading indicator in 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:  


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: 



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

You may also be interested in...

Comments and Discussions

GeneralGreat Plugin Pin
nipunasilva27-Mar-13 5:01
membernipunasilva27-Mar-13 5:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web01 | 2.8.151125.3 | Last Updated 27 Mar 2013
Article Copyright 2013 by Vahid Tavana
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid