Main Menu
info@iogoos.com
Your email has been received and will be responded to as soon as possible.
+91-913 674 7327
We are available 24/7 to take your call.

Copyright © 2026 IOGOOS SOLUTION. All rights reserved.

Our Blog

01 April 2022
ioadmin
Blog, Website Design

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

  1. 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.
  2. 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…

Contact Us

Check Our Portfolio

1
Mujalli says: April 16, 2022 at 2:39 am

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!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts

Request A Quote Now

Enquiry Now

When We Work Together

We can create something incredible

arrow
HQ INDIA
HQ INDIA
C-31, Milap Nagar,
Uttam Nagar, New Delhi,
Delhi 110059
USA
USA
6715 Backlick Rd Suite 202
Springfield,
VA 22150, USA
AUSTRALIA
AUSTRALIA
2/51, Lane Cres,
Reservoir, VIC
3037, Australia
CANADA
CANADA
61 Payzant Bog Road, Falmouth, NS, B0P 1P0, CANADA
UK
UK
3rd Floor, 131 City Road, London, EC1V 2NX, United Kingdom
UAE
UAE
Boutik Mall, Al Reem Island - Abu Dhabi, UAE
X

Let Us Call You Back

  • India+91
  • United States+1
  • United Arab Emirates+971

Your phone number is kept confidential
and not shared with others.

×

Start Your Project