mdxvMLK

index.html

<div id="square-spinner">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

mdxvmlk.markdown

mdxvMLK

A Pen by jianjian on CodePen.

License.

style.scss

$duration: 4s;

#square-spinner {
  height: 100px;
  width: 100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 4px;
  box-sizing: border-box;
}

#square-spinner div {
  background: green;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-sizing: border-box;
  animation-timing-function: ease-in-out;
}

#square-spinner div:nth-child(2) {
  visibility: hidden;
}

#square-spinner div:nth-child(5) {
  animation: none;
}

#square-spinner div:nth-child(1),
#square-spinner div:nth-child(2) {
  transform-origin: bottom right;
}

#square-spinner div:nth-child(3),
#square-spinner div:nth-child(6) {
  transform-origin: bottom left;
}

#square-spinner div:nth-child(8),
#square-spinner div:nth-child(9) {
  transform-origin: top left;
}

#square-spinner div:nth-child(4),
#square-spinner div:nth-child(7) {
  transform-origin: top right;
}


$items: 4 1, 7 2, 8 3, 9 4, 6 5, 3 6;

@each $nth, $index in $items {
  #square-spinner div:nth-child(#{$nth}) {
    animation: rotate#{$nth} $duration infinite;
    @keyframes rotate#{$nth} {
      #{$index * 12.5}% {
        transform: rotate(0turn);
      }

      #{$index * 12.5 + 12.5}% {
        transform: rotate(0.25turn);
      }

      100% {
        transform: rotate(0.25turn);
      }
    }
  }
}

#square-spinner div:nth-child(1) {
  animation: first $duration infinite;
}

#square-spinner div:nth-child(2) {
  animation: second $duration infinite;
}

@keyframes first {
  0% {
    transform: rotate(0);
    visibility: visible;
  }
  12.5% {
    transform: rotate(0.25turn);
    visibility: visible;
  }
  25% {
    transform: rotate(0.25turn);
    visibility: hidden;
  }
  100% {
    transform: rotate(0.25turn);
    visibility: hidden;
  }
}

@keyframes second {
  0% {
    transform: rotate(0);
    visibility: hidden;
  }
  12.5% {
    transform: rotate(0);
    visibility: hidden;
  }
  87.5% {
    transform: rotate(0);
    visibility: visible;
  }
  100% {
    transform: rotate(0.25turn);
    visibility: visible;
  }
}