"People count up the faults of those who keep them waiting"
Seems like I kept them busy decoding this loading bar :D

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

  1. 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.
  2. 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:50px;
    left:50%;
    margin-left:-150px;
    text-align:center;
    padding: 10px;
    font:bold 11px Arial, Helvetica, sans-serif;
    background: #222222;
    color: #ffffff;
}

Live Demo

Use your imagination and create something nice & unique.

Your comment, suggestion and feedback is highly appreciated. There's more to come to stay tuned...