Spinlab

/* === Spinner CSS === */
@keyframes spinner-fade {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

.spinner {
  display: inline-grid;
  grid-template-columns: repeat(5, 12px);
  gap: 3px;
  width: 72px;
  height: 72px;
}

.spinner-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.spinner-cell--active {
  animation: spinner-fade 800ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.spinner-cell[data-row="0"][data-col="0"] {
  background-color: #ff2d55;
  animation-delay: 0ms;
}

.spinner-cell[data-row="0"][data-col="1"] {
  background-color: #ff2d55;
  animation-delay: 60ms;
}

.spinner-cell[data-row="0"][data-col="2"] {
  background-color: #ff2d55;
  animation-delay: 120ms;
}

.spinner-cell[data-row="0"][data-col="3"] {
  background-color: #ff2d55;
  animation-delay: 180ms;
}

.spinner-cell[data-row="1"][data-col="4"] {
  background-color: #ff2d55;
  animation-delay: 300ms;
}

.spinner-cell[data-row="2"][data-col="4"] {
  background-color: #ff2d55;
  animation-delay: 360ms;
}

.spinner-cell[data-row="3"][data-col="4"] {
  background-color: #ff2d55;
  animation-delay: 420ms;
}

.spinner-cell[data-row="4"][data-col="1"] {
  background-color: #ff2d55;
  animation-delay: 660ms;
}

.spinner-cell[data-row="4"][data-col="2"] {
  background-color: #ff2d55;
  animation-delay: 600ms;
}

.spinner-cell[data-row="4"][data-col="3"] {
  background-color: #ff2d55;
  animation-delay: 540ms;
}

.spinner-cell[data-row="4"][data-col="4"] {
  background-color: #ff2d55;
  animation-delay: 480ms;
}

/* === HTML === */
<div class="spinner">
  <div class="spinner-cell spinner-cell--active" data-row="0" data-col="0"></div>
  <div class="spinner-cell spinner-cell--active" data-row="0" data-col="1"></div>
  <div class="spinner-cell spinner-cell--active" data-row="0" data-col="2"></div>
  <div class="spinner-cell spinner-cell--active" data-row="0" data-col="3"></div>
  <div class="spinner-cell" data-row="0" data-col="4"></div>
  <div class="spinner-cell" data-row="1" data-col="0"></div>
  <div class="spinner-cell" data-row="1" data-col="1"></div>
  <div class="spinner-cell" data-row="1" data-col="2"></div>
  <div class="spinner-cell" data-row="1" data-col="3"></div>
  <div class="spinner-cell spinner-cell--active" data-row="1" data-col="4"></div>
  <div class="spinner-cell" data-row="2" data-col="0"></div>
  <div class="spinner-cell" data-row="2" data-col="1"></div>
  <div class="spinner-cell" data-row="2" data-col="2"></div>
  <div class="spinner-cell" data-row="2" data-col="3"></div>
  <div class="spinner-cell spinner-cell--active" data-row="2" data-col="4"></div>
  <div class="spinner-cell" data-row="3" data-col="0"></div>
  <div class="spinner-cell" data-row="3" data-col="1"></div>
  <div class="spinner-cell" data-row="3" data-col="2"></div>
  <div class="spinner-cell" data-row="3" data-col="3"></div>
  <div class="spinner-cell spinner-cell--active" data-row="3" data-col="4"></div>
  <div class="spinner-cell" data-row="4" data-col="0"></div>
  <div class="spinner-cell spinner-cell--active" data-row="4" data-col="1"></div>
  <div class="spinner-cell spinner-cell--active" data-row="4" data-col="2"></div>
  <div class="spinner-cell spinner-cell--active" data-row="4" data-col="3"></div>
  <div class="spinner-cell spinner-cell--active" data-row="4" data-col="4"></div>
</div>