/**********
 *
 * source: https: //codepen.io/Roosa/pen/yOQrdg
 * using: 
 * <div id="loader">
 *   <div class="loader-circle" id="loader-circle1"></div>
 *   <div class="loader-circle" id="loader-circle2"></div>
 *   <div class="loader-circle" id="loader-circle3"></div>
 *   <div class="loader-circle" id="loader-circle4"></div>
 *   <div class="loader-circle" id="loader-circle5"></div>
 * </div>
 * 
 **********/

#loader {
  z-index: 9997;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
}

.loader-circle{
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: absolute;
  border: 1px solid #303030;
  animation: up 1s;
  animation-iteration-count: infinite;
  transition: 2s;
  border-bottom: none;
  border-right: none;
  animation-timing-function: linear;
  margin-left: -70px;
  margin-top: -70px;
  left: 50%;
  top: 50%;
}
  
@keyframes up{
  from { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

#loader-circle2{
  width: 90px;
  height: 90px;
  left: 50.35%;
  top: 50.7%;
  animation-delay: .2s;
}

#loader-circle3{
  width: 80px;
  height: 80px;
  left: 50.70%;
  top: 51.4%;
  animation-delay: .4s;
}

#loader-circle4{
  width: 70px;
  height: 70px;
  left: 51.05%;
  top: 52.1%;
  animation-delay: .6s;
}

#loader-circle5{
  width: 60px;
  height: 60px;
  left: 51.40%;
  top: 52.8%;
  animation-delay: .8s;
}