Design Atlas
한국어
◌ Loaders gallery

Grid Loader

그리드 로더

Cells in a grid lighting up in a diagonal sweep, one after another.

Also known as: Dot grid loaderMatrix pulse
···
html
<div class="wrap" role="status" aria-live="polite">
  <div class="gl" aria-hidden="true">
    <i style="--d:0"></i><i style="--d:1"></i><i style="--d:2"></i>
    <i style="--d:1"></i><i style="--d:2"></i><i style="--d:3"></i>
    <i style="--d:2"></i><i style="--d:3"></i><i style="--d:4"></i>
  </div>
  <span class="cap">행+열 기반 delay = 대각선 웨이브</span>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.gl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(5px,1.6vmin,9px)}
.gl i{width:clamp(10px,3.2vmin,17px);height:clamp(10px,3.2vmin,17px);border-radius:5px;background:var(--accent-3);
  animation:gl 1.4s ease-in-out infinite;animation-delay:calc(var(--d) * .14s)}
@keyframes gl{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.cap{font-size:clamp(9px,2.4vmin,11px);color:var(--muted);letter-spacing:.02em}

Taking up more room than a single dot or bar, this suits a spot that reads as "preparing several items at once" — a card list or a gallery. If the item count is knowable (5 of 12 loaded), showing that number as text or a progress-bar is more accurate than the sweep alone.

In a 3×3 grid, setting each cell's animation-delay proportional to its row plus column (delay = (row + col) × 0.1s) produces a diagonal wave that travels from top-left to bottom-right. Animating scale together with opacity per cell adds depth beyond a plain brightness change.

For a loading state that fills the screen for a while with many cells, a skeleton fits better; skip it for anything under 200ms. Give the wrapper role="status" and aria-live="polite", and hide the cells with aria-hidden="true" since they're decorative. Under prefers-reduced-motion, simplify the diagonal sweep to the whole grid pulsing faintly together.