dsebao
3/25/2015 - 2:25 PM

Simple loader page jquery

Simple loader page jquery

.loader{
  background: #AB201C; /*Fondo*/
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  z-index: 9000;
}

.spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: auto auto;
}

.wrapperloader{
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 60px;
  right: 0;
  margin: auto auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff; /*color del loader*/
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  -moz-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}
$(window).load(function() {
	$('.loader').delay(100).fadeOut(800, function() {
	});
});
<div class="loader">
  <div class="wrapperloader">
    <div class="spinner">
      <div class="double-bounce1"></div>
      <div class="double-bounce2"></div>
    </div>
  </div>
</div>