I want to stop the preloader. When the page loads, I want it should hide

I want unable to stop this preloader. When the page loads, I want it should hide. I want to stop the preloader. Any help would be really helpful. If possible kindly help how to do achieve it via Javascript

@-webkit-keyframes preload-show-1 {
  from {
    -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-show-1 {
  from {
    -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-hide-1 {
  to {
    -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-hide-1 {
  to {
    -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-cycle-1 {
  5% {
    -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  10%,
  75% {
    -webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  80%,
  100% {
    -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-cycle-1 {
  5% {
    -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  10%,
  75% {
    -webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  80%,
  100% {
    -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-show-2 {
  from {
    -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-show-2 {
  from {
    -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-hide-2 {
  to {
    -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-hide-2 {
  to {
    -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-cycle-2 {
  10% {
    -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  15%,
  70% {
    -webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  75%,
  100% {
    -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-cycle-2 {
  10% {
    -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  15%,
  70% {
    -webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  75%,
  100% {
    -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-show-3 {
  from {
    -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-show-3 {
  from {
    -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-hide-3 {
  to {
    -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-hide-3 {
  to {
    -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-cycle-3 {
  15% {
    -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  20%,
  65% {
    -webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  70%,
  100% {
    -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-cycle-3 {
  15% {
    -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  20%,
  65% {
    -webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  70%,
  100% {
    -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-show-4 {
  from {
    -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-show-4 {
  from {
    -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-hide-4 {
  to {
    -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-hide-4 {
  to {
    -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-cycle-4 {
  20% {
    -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  25%,
  60% {
    -webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  65%,
  100% {
    -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-cycle-4 {
  20% {
    -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  25%,
  60% {
    -webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  65%,
  100% {
    -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-show-5 {
  from {
    -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-show-5 {
  from {
    -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-hide-5 {
  to {
    -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-hide-5 {
  to {
    -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-cycle-5 {
  25% {
    -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  30%,
  55% {
    -webkit-transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  60%,
  100% {
    -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-cycle-5 {
  25% {
    -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  30%,
  55% {
    -webkit-transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  60%,
  100% {
    -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-show-6 {
  from {
    -webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-show-6 {
  from {
    -webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-hide-6 {
  to {
    -webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-hide-6 {
  to {
    -webkit-transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-cycle-6 {
  30% {
    -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  35%,
  50% {
    -webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  55%,
  100% {
    -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@keyframes preload-cycle-6 {
  30% {
    -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
  35%,
  50% {
    -webkit-transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
    transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
    border-left-color: #f7484e;
  }
  55%,
  100% {
    -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #9c2f2f;
  }
}

@-webkit-keyframes preload-flip {
  0% {
    -webkit-transform: rotateY(0deg) rotateZ(-60deg);
    transform: rotateY(0deg) rotateZ(-60deg);
  }
  100% {
    -webkit-transform: rotateY(360deg) rotateZ(-60deg);
    transform: rotateY(360deg) rotateZ(-60deg);
  }
}

@keyframes preload-flip {
  0% {
    -webkit-transform: rotateY(0deg) rotateZ(-60deg);
    transform: rotateY(0deg) rotateZ(-60deg);
  }
  100% {
    -webkit-transform: rotateY(360deg) rotateZ(-60deg);
    transform: rotateY(360deg) rotateZ(-60deg);
  }
}

body {
  background: #efefef;
}

.preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
  display: block;
  width: 3.75em;
  height: 4.25em;
  margin-left: -1.875em;
  margin-top: -2.125em;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: rotateY(180deg) rotateZ(-60deg);
  transform: rotateY(180deg) rotateZ(-60deg);
}

.preloader .slice {
  border-top: 1.125em solid transparent;
  border-right: none;
  border-bottom: 1em solid transparent;
  border-left: 1.875em solid #f7484e;
  position: absolute;
  top: 0px;
  left: 50%;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
  border-radius: 3px 3px 0 0;
}

.preloader .slice:nth-child(1) {
  -webkit-transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
  transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
  -webkit-animation: 0.15s linear 0.82s preload-hide-1 both 1;
  animation: 0.15s linear 0.82s preload-hide-1 both 1;
}

.preloader .slice:nth-child(2) {
  -webkit-transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
  transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
  -webkit-animation: 0.15s linear 0.74s preload-hide-2 both 1;
  animation: 0.15s linear 0.74s preload-hide-2 both 1;
}

.preloader .slice:nth-child(3) {
  -webkit-transform: rotateZ(180deg) rotateY(0deg) rotateX(0);
  transform: rotateZ(180deg) rotateY(0deg) rotateX(0);
  -webkit-animation: 0.15s linear 0.66s preload-hide-3 both 1;
  animation: 0.15s linear 0.66s preload-hide-3 both 1;
}

.preloader .slice:nth-child(4) {
  -webkit-transform: rotateZ(240deg) rotateY(0deg) rotateX(0);
  transform: rotateZ(240deg) rotateY(0deg) rotateX(0);
  -webkit-animation: 0.15s linear 0.58s preload-hide-4 both 1;
  animation: 0.15s linear 0.58s preload-hide-4 both 1;
}

.preloader .slice:nth-child(5) {
  -webkit-transform: rotateZ(300deg) rotateY(0deg) rotateX(0);
  transform: rotateZ(300deg) rotateY(0deg) rotateX(0);
  -webkit-animation: 0.15s linear 0.5s preload-hide-5 both 1;
  animation: 0.15s linear 0.5s preload-hide-5 both 1;
}

.preloader .slice:nth-child(6) {
  -webkit-transform: rotateZ(360deg) rotateY(0deg) rotateX(0);
  transform: rotateZ(360deg) rotateY(0deg) rotateX(0);
  -webkit-animation: 0.15s linear 0.42s preload-hide-6 both 1;
  animation: 0.15s linear 0.42s preload-hide-6 both 1;
}

.preloader {
  -webkit-animation: 2s preload-flip steps(2) infinite both;
  animation: 2s preload-flip steps(2) infinite both;
}

.preloader .slice:nth-child(1) {
  -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0);
  transform: rotateZ(60deg) rotateY(90deg) rotateX(0);
  -webkit-animation: 2s preload-cycle-1 linear infinite both;
  animation: 2s preload-cycle-1 linear infinite both;
}

.preloader .slice:nth-child(2) {
  -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0);
  transform: rotateZ(120deg) rotateY(90deg) rotateX(0);
  -webkit-animation: 2s preload-cycle-2 linear infinite both;
  animation: 2s preload-cycle-2 linear infinite both;
}

.preloader .slice:nth-child(3) {
  -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0);
  transform: rotateZ(180deg) rotateY(90deg) rotateX(0);
  -webkit-animation: 2s preload-cycle-3 linear infinite both;
  animation: 2s preload-cycle-3 linear infinite both;
}

.preloader .slice:nth-child(4) {
  -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0);
  transform: rotateZ(240deg) rotateY(90deg) rotateX(0);
  -webkit-animation: 2s preload-cycle-4 linear infinite both;
  animation: 2s preload-cycle-4 linear infinite both;
}

.preloader .slice:nth-child(5) {
  -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0);
  transform: rotateZ(300deg) rotateY(90deg) rotateX(0);
  -webkit-animation: 2s preload-cycle-5 linear infinite both;
  animation: 2s preload-cycle-5 linear infinite both;
}

.preloader .slice:nth-child(6) {
  -webkit-transform: rotateZ(360deg) rotateY(90deg) rotateX(0);
  transform: rotateZ(360deg) rotateY(90deg) rotateX(0);
  -webkit-animation: 2s preload-cycle-6 linear infinite both;
  animation: 2s preload-cycle-6 linear infinite both;
}

html.preloader body {
  /* Make the contents of the body opaque during loading */
  opacity: 0;
  /* Ensures that the transition only runs in one direction */
  -webkit-transition: opacity 0;
  transition: opacity 0;
}
<!DOCTYPE html>
<html class="no-js">

<head>
  <meta charset='UTF-8'>
  <title>Simple Loader</title>
</head>

<body>
  <div class="preloader">
    <span class="slice"></span>
    <span class="slice"></span>
    <span class="slice"></span>
    <span class="slice"></span>
    <span class="slice"></span>
    <span class="slice"></span>
  </div>
</body>

</html>

Answers 1

  • Add a handler for page load and with that you remove the preloader class and the div will collapse into nothing.

    window.addEventListener('load', function() {
      document.querySelector('.preloader').classList.remove('preloader');
    
      // or use a timer to delay it a little
      /*
      setTimeout(function(){ 
        document.querySelector('.preloader').classList.remove('preloader');
      }, 500);
      */
    })
    @-webkit-keyframes preload-show-1 {
      from {
        -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-show-1 {
      from {
        -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-hide-1 {
      to {
        -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-hide-1 {
      to {
        -webkit-transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-cycle-1 {
      5% {
        -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
      10%,
      75% {
        -webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
        border-left-color: #f7484e;
      }
      80%,
      100% {
        -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-cycle-1 {
      5% {
        -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
      10%,
      75% {
        -webkit-transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
        border-left-color: #f7484e;
      }
      80%,
      100% {
        -webkit-transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-show-2 {
      from {
        -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-show-2 {
      from {
        -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-hide-2 {
      to {
        -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-hide-2 {
      to {
        -webkit-transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-cycle-2 {
      10% {
        -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
      15%,
      70% {
        -webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
        border-left-color: #f7484e;
      }
      75%,
      100% {
        -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-cycle-2 {
      10% {
        -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
      15%,
      70% {
        -webkit-transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
        border-left-color: #f7484e;
      }
      75%,
      100% {
        -webkit-transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-show-3 {
      from {
        -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-show-3 {
      from {
        -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-hide-3 {
      to {
        -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-hide-3 {
      to {
        -webkit-transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-cycle-3 {
      15% {
        -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
      20%,
      65% {
        -webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
        border-left-color: #f7484e;
      }
      70%,
      100% {
        -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-cycle-3 {
      15% {
        -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
      20%,
      65% {
        -webkit-transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
        border-left-color: #f7484e;
      }
      70%,
      100% {
        -webkit-transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-show-4 {
      from {
        -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-show-4 {
      from {
        -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-hide-4 {
      to {
        -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-hide-4 {
      to {
        -webkit-transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-cycle-4 {
      20% {
        -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
      25%,
      60% {
        -webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
        border-left-color: #f7484e;
      }
      65%,
      100% {
        -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-cycle-4 {
      20% {
        -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
      25%,
      60% {
        -webkit-transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
        border-left-color: #f7484e;
      }
      65%,
      100% {
        -webkit-transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-show-5 {
      from {
        -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-show-5 {
      from {
        -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-hide-5 {
      to {
        -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @keyframes preload-hide-5 {
      to {
        -webkit-transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
        transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
    }
    
    @-webkit-keyframes preload-cycle-5 {
      25% {
        -webkit-transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
        transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
        border-left-color: #9c2f2f;
      }
      30%,
      55% {
        -webkit-transform: rotateZ(300de                                                                    

Related Articles