An easy way to create Loading Bar!
“People count up the faults of those who keep them waiting”
Seems like I kept them busy decoding this loading bar 
How to create a loading bar
Recently, while browsing I landed on a page on StackOverflow.com where people were discussing about how I implemented this loading bar on CSSJockey.com. I could sense a lot of confusion in the discussion so thought I would take the mystery out as I love to share best practices. Here’s how you can create a loading bar in few steps..
Things You’ll Need
- A nice loading image: If you are good in creating animated GIF images that’s nice, otherwise you can create a loading image with this cool Ajax Loading Gif Generator.
- jQuery: We are creating this loading bar using jQuery so download jQuery latest version here.
jQuery Code within <head>..</head> tags
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
$("#loading").hide();
})
</script>
HTML Code within <body>..</body>tags
<div id="loading"> Loading content, please wait.. <img src="loading.gif" alt="loading.." /> </div>
Make sure you add this code just below the starting <body> tag so it should be downloaded first.
CSS Code for loading DIV
#loading {
position:absolute;
width:300px;
top:0px;
left:50%;
margin-left:-150px;
text-align:center;
padding:7px 0 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
}
Use your imagination and create something nice & unique.
View Demo | Download Source Code
Your comment, suggestion and feedback is highly appreciated.
There’s more to come to stay tuned…
Thanks so much.
Great tutorial! Added to favorites and bookmarked this site!
Thanks!!!
Thanks so much Mohit.
So I’m a complete novice when it comes to Java. I was wondering how I can substitute the “$(window)” bit for a div so that when a certain div is finished loading it executes the “$(“#loading”).hide();” part, instead of wait Any ideas? I’ve tried the below but couldnt get it to work:
$(“#slideshow”).load(function(){
$(“#home-load”).hide();
})
Thanks again.
Never mind! Found solution. It was to use an “onload” command on an image in a certain div on my page. That triggers the hide loadingscreen function.
function loadingscreen()
{
$(“#home-load”).hide();
}
I then did the following:
<img src="images/Services-Sub4.png" alt="Printing" onload="loadingscreen()"
My gallery is 8mb in size, so I didnt want the user waiting for that long while the whole gallery downloads, only a segment of it.
I have a gif file and want to add it as my loading screen page,but I am using wordpress and cannot figure out where to insert the code.
You can add the code in your theme files, use header.php or footer.php to insert the code for all pages.
mohit bro i need ur help
i want to delete out going links from footer can u pls help me they r comin from theme server 
Please send me more details to my email address and will discuss the same.
Cool blog! I really enjoy it.
Thanks, I am glad you like what I do
Hi, I was wondering where do you put the ‘CSS Code for loading DIV’ within the html script? :s
I have tried it in visual studio but it’s not working.
do you have any idea?
thanks
Abal2
If you have written the same code, it should work. use firebug to debug and test.
Ok, I’ll try. I’ll ask you again, if I’m still confused. Thank you very much
Thank you very much. It is very useful for me!
First of all Thank you very much…!
This is the One i am searching for the whole day…(Thanks to Google also)
Well done..Keep posting……
Worked first time, 3rd i’ve tried, only one that works!
Well Done!
Great tutorial! Can you think of why it would not work in IE7? FF and EI8 it works like a charm, in EI7 I get the bar with no animation…
I have jquery-1.2.6.min.js on the page and loaded on the server.
Thank you for sharing.
Gary
I guess with animation you mean the bar, its an image so check the paths..
Thank you for your reply, no I meant that the image does not animate in IE7, it displays the image, but it does not animate. It works perfect in FF, so it would seem to be a browser specific issue.
In fact, I just checked your demo, and it does not work in IE7, however it is working in IE8, so I am guessing I must have some setting in my IE7 that is not allowing the animation…
If you can think of anything, that would be great, if not, thank you for the code and for your reply.
gary
Awesome!! Gr8 job.. Its perfectly working… Coool too..
I have the same question as “Arjhun” I would like to know how to make my loading bar appear first and then once the page is done loading Have my contexts appear and were do i put the the “CSS Code for loading DIV” I’m new to this kind of things so I would be overly happy for any help you could provide.
Its really interesting… Cool.. Thanks Jockey…
thnx a lot for this step by step procedure to incorporate a loading bar .
Your welcome, I am glad it helped!!
This passage helps a lot. I am creating my own greasemonkey tweats. So creating a loading layer just about to be the problem. Thx a lot~
Worked like a charm. Especially, the comments along with the code made things quick and easy.
Thanks a lot.
CAn yu make a loading bar to go in my signature on my phone someone got it but they want tell me how
This script is not working when content is being generated by PHP.
My PHP content is generated by HTML DOM parser.
You would need to tweek the script as per your requirements.. I hope you get an idea of how its done
You would need to tweak the script as per your requirements.. I hope you get an idea of how its done
thanks… its very simple……..great work…..:D
thnk for sharing….if u dont mind can u sharing loading code for ur page..
Sure, I’ll try to write a tutorial on this next week. Thanks!!
I see that you have updated your loading bar with a lightbox effect. I have tried combining them, but it didn’t work. Would you be able to update your tutorial for this?
Replied to your previous comment, try that code. I’ll try to write a tutorial for the same..
hi
I insert the codes. How can i preview it in my local pc, before upload it to server?
tnx
You need to install a local server on your computer to replicate similar environment on your local computer.
For PC you can download Wamp and if you are using Mac or Linux you can download XAMPP or MAMP.
Thank you so much…useful tip
great post.. nice and awesome. thank you…
Well nice tutorial but this only waits until the DOM is loaded i think, and it doesnt really check if all the images and stuff have loaded.
Oh, someone asked about a percentage loading bar: Well, you cant do a percentage loading bar for all loading things, especially for a webpage!
very nice tutorial. i wish a body which want get sure from it.
thanks
Really Nice thanks.
Excellent!!!
Thank you. I’ve already tested on my site and works perfect!!!!
Hello to all,
What I want to do, is create a loading thing [ i already have mine ready for use ] but to show it for say 5 seconds then it re-direct to another webpage .. is there a way to do this.. well.. I’m sure there is tbh, Please help, thanks !
You can use Javascript setTimeout() function to achieve this.
Hi, Mohit.
Another great tips after Santa’s says on dec.
I will try in myblog. Thanks
I see how this works for a page loading, but do you know how to do something like this if you are waiting for the content to be generated in php?
Thanks
@destry: If you are using ajax you can call the loading bar within your code. In jQuery you can use the following code:
$(“#loading”).ajaxStart(function(){
$(this).show();
});
Huh, i can’t see the preview image. Btw, nice work.
well i would like to know how to make my loading bar appear first and then once the page is done loading it should redirect the person .. any ideas ?? please email me at arjhun.s@gmail.com .. thanx people
Great tip, thank you.
Great work.. !!
Thanks for sharing.
Thanks for the tutorial, i will use that in my page. I wish it would also show the percantage…
This is wonderful! Thank you so much!
Quick question:
How would I call that top function if a form was submitted? I have a file upload section I am working on and could use a cool loading bar like this when the upload form is submitted…
You can use this function on $(“#formid”).submit() and use $.ajax(options) to accomplish this.
Here’s an example:
$.ajax({
type: “POST”,
url: “some.php”,
data: “name=John&location=Boston”,
success: function(msg){
alert( “Data Saved: ” + msg );
}
});
Thanks for the post. Relatively easy….it took me some time to get the jQuery to work.
Good post dude.
hi i have tried progress bar in my site.it works fine. but it not displays all the time. Moreover while displaying this image, it looks displaying in separate page. i want to display it in my current page when the page takes more time to load……
Any ideas…
Please share the link of your website where you’re trying to display the loading/progress bar, so that I can take a look and help you out with any issues.
Mohit Aneja,
That was very helpful Mohit!! I never thought that you’ll find my question in Stackoverflow!
I’ll definitely never forget your helpful spirit!
How did you know about the question in Stackoverflow? You are not even registered user yet!
I saw a link back in WordPress Dashboard and checked your entry on Stackoverflow.com. I love to share best practices so thought answering this question will be a good start.
You can join our Google Group and be a part of CJ community http://groups.google.com/group/cssjockey
Thanks for sharing – Nifty tip!
excellent tutorial.
Thanks
Thanks for sharing, I will try this on my website…