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…

Author: CSSJockey

Mohit is a freelance web designer/developer based in Chandigarh India. After serving some big brands like DELL, Convergys he founded CSSJockey.com in Jan 01, 2009. Follow on Twitter | Connect via Facebook | Read more »

19 Responses to “An easy way to create Loading Bar!”

22 Jan, 2010

Harry says:

Hi, Mohit.
Another great tips after Santa’s says on dec.
I will try in myblog. Thanks

16 Jan, 2010

destry says:

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

18 Jan, 2010

CSSJockey says:

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

12 Jan, 2010

Tran Tuan Anh says:

Huh, i can’t see the preview image. Btw, nice work.

02 Jan, 2010

Arjhun says:

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

11 Dec, 2009

DeKo says:

Great tip, thank you.

23 Nov, 2009

Muhammad says:

Great work.. !!
Thanks for sharing.

03 Sep, 2009

A2f says:

Thanks for the tutorial, i will use that in my page. I wish it would also show the percantage…

09 Jul, 2009

Mike says:

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…

09 Jul, 2009

CSSJockey says:

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

26 May, 2009

Cody says:

Thanks for the post. Relatively easy….it took me some time to get the jQuery to work.

30 Apr, 2009

Tech @ InkAPoint says:

Good post dude.

27 Apr, 2009

Ashok says:

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…

27 Apr, 2009

CSSJockey says:

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.

04 Mar, 2009

Raymond Ho says:

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!

04 Mar, 2009

CSSJockey says:

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