“People count up the faults of those who keep them waiting”
Seems like I kept them busy decoding this loading bar 😀
Recently, while browsing I landed on a page on StackOverflow.com where people were discussing how I implemented this loading bar on www.iogoos.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 a few steps…
Things You’ll Need
- A nice loading image: If you are good at creating animated GIF images that are 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 the 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;
}Use your imagination and create something nice & unique.
Your comment, suggestion, and feedback are highly appreciated. There’s more to come to stay tuned…
