spinner ec

by Henry

HTML

<div class="spinner"></div>

SCSS

body {
  background: #000;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate3d(-50%, -50%, 0);
  
  &::before,
  &::after {
    position: absolute;
    top: -20px;
    left: -20px;
    content: '';
    display: block;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.5);
    animation: spin1 1s infinite linear;
  }
  
  &::after {
    animation: spinner 1.1s infinite linear reverse;
    border-top-color: rgba(255, 0, 0, 0.5);
  }
}

@keyframes spinner {
  100% {
    transform: rotate(360deg);
  }
}