<!-- preloader start here -->
<div id="overlay">
		<div class="loader-1" id="loader-1"></div>
		<div class="loader-2" id="loader-2"></div>
</div>
<!-- preloader end here -->


<!-- Body content start here -->
<div class="content">
  <h1 class="title">Page load complete<h1>
  <img class="big-img" src="http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png">
</div>
<!-- Body content end here -->
/* global */
*{
  margin:0;
  padding:0;
}


/* preloader start here */
#overlay{
    width: 100%;
    height: 100%;
    
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    background: #232526;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.loader-1, .loader-2{
    position: absolute;
    border:5px solid transparent;
    border-radius: 50%;
    left: 50%;
    top: 40%;
    transform: translateX(-50%);
}
.loader-1 {
    width: 140px;
    height: 140px;
    border-top: 5px solid #f9c922;
    border-bottom: 5px solid #f9c922;
    animation: clockwisespin 2s ease infinite;
}
.loader-2 {
    width: 120px;
    height: 120px;
    border-left: 5px solid #3498db;
    border-right: 5px solid #3498db;
    margin-left: 10px;
    margin-top: 10px;
    animation: anticlockwisespin 2s cubic-bezier(.68,-0.55,.27,1.55) infinite;
}

@keyframes clockwisespin{
    from{transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@keyframes anticlockwisespin{
    from{transform: rotate(360deg);}
    to {transform: rotate(0deg);}
}
/* preloader end here */


/* body content start here */
.content{
  text-align:center;
}
.content .title{
  position:fixed;
  top:5%;
  left:50%;
  z-index:10;
  transform: translateX(-50%);
  color:white;
}
.big-img{
  width:100%;
  position:absolute;
  z-index:5;
  top:0;
  left:0;  
}
/* body content end here */
var overlay = document.getElementById("overlay");

window.addEventListener('load', function(){
  overlay.style.display = 'none';
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.