Pulsing Grid Loader

<!--
  Author: @yokkcode
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="grid-loader">
  <span></span><span></span><span></span>
  <span></span><span></span><span></span>
  <span></span><span></span><span></span>
</div>

/*
 * Author: @yokkcode
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.grid-loader {
  display: grid;
  grid-template-columns: repeat(3, 14px);
  grid-template-rows: repeat(3, 14px);
  gap: 6px;
}
.grid-loader span {
  border-radius: 3px;
  background: #fbbf24;
  animation: grid-pulse 1.6s ease-in-out infinite;
}
.grid-loader span:nth-child(1) { animation-delay: 0s; }
.grid-loader span:nth-child(2) { animation-delay: 0.1s; }
.grid-loader span:nth-child(3) { animation-delay: 0.2s; }
.grid-loader span:nth-child(4) { animation-delay: 0.1s; }
.grid-loader span:nth-child(5) { animation-delay: 0.2s; }
.grid-loader span:nth-child(6) { animation-delay: 0.3s; }
.grid-loader span:nth-child(7) { animation-delay: 0.2s; }
.grid-loader span:nth-child(8) { animation-delay: 0.3s; }
.grid-loader span:nth-child(9) { animation-delay: 0.4s; }
@keyframes grid-pulse {
  0%, 100% { transform: scale(0.6); opacity: 0.35; box-shadow: none; }
  50% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px 1px rgba(251, 191, 36, 0.7); }
}