How to show Page Loading div until the page has finished loading?

by

Original Answer

I’ve needed this and after some research I came up with this (jQuery needed):

First, right after the <body> tag add this:

<div id="loading">
  <img id="loading-image" src="path/to/ajax-loader.gif" alt="Loading..." />
</div>

Then add the style class for the div and image to your CSS:

#loading {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

Then, add this javascript to your page (preferably at the end of your page, before your closing </body> tag, of course):

<script>
  $(window).load(function() {
    $('#loading').hide();
  });
</script>

Finally, adjust the position of the loading image and the background-color of the loading div with the style class.

This is it, should work just fine. But of course you should have an ajax-loader.gif somewhere or use base64 url for image’s src value. Freebies here. (Right-click > Save Image As…)

Update

For jQuery 3.0 and above you can use:

<script>
  $(window).on('load', function () {
    $('#loading').hide();
  }) 
</script>

Update

The original answer is from jQuery and before flexbox era. You can use many view management libraries / frameworks now like Angular, React and Vue.js. And for CSS you have flexbox option. Below is CSS alternative:

#loading {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
}

#loading-image {
  z-index: 100;
}

More Related Contents:

  1. jQuery. Find all attribute values within/under elements `script or noscript or iframe` that have attribute keys as `src or href` [closed]
  2. jQuery document.createElement equivalent?
  3. How can I select an element by name with jQuery?
  4. What is the most efficient way to create HTML elements using jQuery?
  5. How do I create a link using javascript?
  6. Finding line-wraps
  7. How to get the element clicked (for the whole document)?
  8. Why are duplicate ID values not allowed in HTML?
  9. Is there a DOM event that fires when an HTML select element is closed?
  10. How to find a parent with a known class in jQuery?
  11. jQuery: how to change tag name?
  12. Is there any “on DOM change” event? [duplicate]
  13. Get the DOM path of the clicked
  14. How to move table row in jQuery?
  15. Jquery Event Not Triggering for DOM Elements Created after page load [duplicate]
  16. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  17. How to add DOM element script to head section?
  18. Uncaught TypeError: Cannot read property ‘top’ of undefined
  19. JQuery html() vs. innerHTML
  20. How can I get access to a Highcharts chart through a DOM-Container?
  21. Open new window without focus on it [duplicate]
  22. How can I remove wrapper (parent element) without removing the child?
  23. User Activity Tracking using javascript library [closed]
  24. window.getSelection return html [duplicate]
  25. How to properly unload/destroy a VIDEO element
  26. How to get on-screen visible element objects in jQuery? [duplicate]
  27. Test if an element can contain text
  28. Why I cant use jQuery functionality
  29. Retrieving file names out of a multi-file upload control with javascript
  30. submit event does not fire if submit initiated programmatically

Leave a Comment