square

:arrow_left:back

<div class="loader">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background: #b3e5fc;
}

.loader {
  width: 10em;
  height: 10em;
  display: flex;
  flex-wrap: wrap;

  .square {
    width: 25%;
    height: 25%;
    background: #ff5252;
    animation: zoom 1.4s ease-in-out infinite;

    // stagger from left-bottom to right-top
    // order: 13 - 9,14 - 5,10,15 - 1,6,11,16 - 2,7,12 - 3,8 - 4
    &:nth-child(13) {
      animation-delay: 0s;
    }

    &:nth-child(9),
    &:nth-child(14) {
      animation-delay: 0.1s;
    }

    &:nth-child(5),
    &:nth-child(10),
    &:nth-child(15) {
      animation-delay: 0.2s;
    }

    &:nth-child(1),
    &:nth-child(6),
    &:nth-child(11),
    &:nth-child(16) {
      animation-delay: 0.3s;
    }

    &:nth-child(2),
    &:nth-child(7),
    &:nth-child(12) {
      animation-delay: 0.4s;
    }

    &:nth-child(3),
    &:nth-child(8) {
      animation-delay: 0.4s;
    }

    &:nth-child(4) {
      animation-delay: 0.5s;
    }
  }
}

@keyframes zoom {
  35% {
    transform: scale(0);
  }

  0%,
  70%,
  to {
    transform: scale(1);
  }
}