Instantly share code, notes, and snippets.

What would you like to do?
Hide the page body until page & dependencies have finished loading
// add a class of 'loading' to the HTML, then remove it once the page has finished loading
c('scripted loading')
window.onload = function(){setTimeout(function(){
var h = document.lastChild
return c ? h.className = c : h.className
html.loading body {
opacity: 0;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
-webkit-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
html.loading:after {
content: 'Loading...';
display: block;
line-height: 1em;
margin-top: -.5em;
position: absolute;
text-align: center;
top: 50%;
width: 100%;

This comment has been minimized.


barneycarroll commented May 24, 2011

Wrapped window.onload setTimeout in an anonymous function to circumvent IE6 'Not implemented' native function assignment bug.


This comment has been minimized.

ssavery commented Oct 22, 2011

This code is exactly what I have been looking for however I do have one question.
I want to replace the "Loading..." text with and ajax loading gif.
I am terrible with code and have been pathetically doing trial and error attempts for close to an hour now...
Could you please show me how to modify this code so that a .gif file is displayed instead of the load text while the page loads.
Thank you for any help!


This comment has been minimized.


barneycarroll commented Nov 7, 2011

ssavery, sorry for not getting back to you sooner. I've already produced versions of this same mechanism using a loading GIF, which works very nicely. You can take and modify the code from this site: (the code for the loading appearance begins at line 170 of the CSS at — and you can inspect it in detail by reapplying the class 'loading' to the HTML tag via Firebug or your DOM Inspector). In that example, I didn't apply the loading GIF to the body itself (or an ::after element) because I still wanted to show some other background elements while most of the hefty resources downloaded.

Hope this helps.


This comment has been minimized.

FarzadWadia commented Jun 5, 2016

replace the "Loading..." text with loading image.


This comment has been minimized.

itpessane commented Aug 23, 2018

It works for me. But, can some one help me to not hide the body, but prevent click to it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment