Spinner 3

by Simon Herteby

HTML

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

SCSS

.spinner{
  width:80px;
  height:80px;
  position:relative;
  transform:rotate(45deg);
  animation:fadeIn 0.5s;
  div{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    animation:spin 3s infinite cubic-bezier(0.5, 0, 0, 1);
    &::after{
      content: '';
      display:block;
      width:15%;
      height:15%;
      background:#08f;
      border-radius:50%;
    }
    &:nth-child(1){
      animation-delay:-0.25s;
    }
    &:nth-child(2){
      animation-delay:-0.5s;
    }
    &:nth-child(3){
      animation-delay:-0.75s;
    }
    &:nth-child(4){
      animation-delay:-1s;
    }
    &:nth-child(5){
      animation-delay:-1.25s;
    }
    &:nth-child(6){
      animation-delay:-1.5s;
    }
    &:nth-child(7){
      animation-delay:-1.75s;
    }
  }
}
@keyframes spin{
  0%, 10% {
    opacity:0;
  }
  40% {
    opacity:1;
  }
  65% {
    opacity:0;
  }
  100% {
    transform: rotate(360deg);
    opacity:0;
  }
}
@keyframes fadeIn{
  from {
    opacity: 0;
  }
}

html{
  height:100%;
}
body{
  background:#20262e;
  height:100%;
  margin:0px;
  display:flex;
  align-items:center;
  justify-content:center;
}