loader animation

HTML

<div class="classGrid">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div class=""></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div class=""></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div class="selected"></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>

SCSS


.classGrid {
  display: grid;
  justify-content: center;
  grid-gap: 1px;
  grid-template-columns: repeat(21, 1fr);
  grid-template-rows: repeat(7, 1fr);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  > div {
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    padding: 4px;
    background: #111;
    border-radius: 10%;
    border: 1px solid #222;
  }

  // When a grid item is selected, run the animation
  .selected {
    animation: anims 5s linear infinite;
  }
}

// Generate nth-child animation-delay rules using a loop
@for $i from 1 through 148 {
  .classGrid > div:nth-child(#{$i}) {
    animation-delay: #{($i * 0.01s)};
  }
}
Back to top