Skip to content

Instantly share code, notes, and snippets.

@barneycarroll
Created May 19, 2011 16:55
Show Gist options
  • Save barneycarroll/981217 to your computer and use it in GitHub Desktop.
Save barneycarroll/981217 to your computer and use it in GitHub Desktop.
Hide the page body until page & dependencies have finished loading
<script>
// add a class of 'loading' to the HTML, then remove it once the page has finished loading
(function(c){
c('scripted loading')
window.onload = function(){setTimeout(function(){
c(c().replace('loading',''))
},30)}
}(function(c){
var h = document.lastChild
return c ? h.className = c : h.className
}))
</script>
<style>
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%;
}
</style>
@FarzadWadia
Copy link

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

Copy link

ghost 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