Animated Loading

by kelvinau

HTML

<div class="container">
  <span class="spinner">
    <span class="bottom"></span>
    <span class="top"></span>
  </span>
  <span class="loading">loading</span>
</div>

SCSS

@keyframes top-circle {
  from {
    transform: rotate(-25deg);
  }
  to {
    transform: rotate(335deg);
  }
}
@keyframes bottom-circle {
  from {
    transform: rotate(-15deg);
  }
  to {
    transform: rotate(345deg);
  }
}
// for SVG
/*  @keyframes van-circular {  
  0% {
      stroke-dasharray: 1, 200;   stroke-dashoffset: 0; 
   } 
   50% {   
   stroke-dasharray: 90, 150;    stroke-dashoffset: -40;
   } 
   100% {   
   stroke-dasharray: 90, 150;    stroke-dashoffset: -120;
   }
 }  
 */
 
html {
  //background-color: black;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 30px;
  .spinner {
    padding-right: 35px;
    & > span {
      display: inline-block;
      position: absolute;
      border-radius: 100px;
      padding: 8px;
      border: 5px solid transparent;
      &.top {
        border-top: 5px solid white;
        animation: top-circle 1s ease-in-out infinite;
        animation-delay: 0.2s;
      }
      &.bottom {
        border-top: 5px solid #c23531;
        animation: bottom-circle 1s ease-in-out infinite;
      }
    }
  }
}