Preloader

index.html

<div class="preloader">
  <div class="preloader-wrapper">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

preloader.markdown

Preloader

A Pen by Tanju Yıldız on CodePen.

License.

style.less

@preloader-bg-color: rgba(0,0,0,.6);
@preloader-item-bg-color: rgba(255,255,255,.5);
@preloader-item-border-color: rgba(0,0,0,.1);
@preloader-item-height: 24px;
@preloader-item-width: 24px;

* {
  box-sizing: border-box;
}
html {
  font-size: 10px;
}
body {
  font-size: 1.4em;
}
.preloader {
  background-color: @preloader-bg-color;
  font-size: 0;
  height: 100%;
  position: absolute;
    left: 0;
    top: 0;
  width: 100%;
  z-index: 1000;
  
  .preloader-wrapper {
    position: absolute;
      left: 50%;
      top: 50%;
    transform: translate(-50%, -50%);
  }
  
  span {
    animation: preloader 2s ease-in infinite;
    background-color: @preloader-item-bg-color;
    border: 2px solid @preloader-item-border-color;
    border-radius: 100%;
    display: inline-block;
    font-size: 1.4em;
    height: @preloader-item-height;
    margin: 6px;
    width: @preloader-item-width;
    
    &:nth-child(1) {
      animation-delay: 0;
    }
    &:nth-child(2) {
      animation-delay: .2s;
    }
    &:nth-child(3) {
      animation-delay: .4s;
    }
  }
}

@keyframes preloader {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(2);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}