Let Us Call You Back
Your phone number is kept confidential
and not shared with others.
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 😀
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…
Woah! I’m really loving the template/theme of this blog. It’s simple, yet effective. A lot of times it’s difficult to get that “perfect balance” between superb usability and visual appeal. I must say you’ve done a very good job with this. In addition, the blog loads super fast for me on Chrome. Superb Blog!