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)}; } }