디자인 아틀라스
EN
◌ 로더·로딩 갤러리

그리드 로더

Grid Loader

격자로 배열된 칸들이 대각선 방향으로 순서대로 켜졌다 꺼지는 비확정적 로더.

다른 이름: 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}

점이나 막대 하나짜리 로더보다 화면을 더 넓게 차지해서, 카드 목록 전체나 갤러리처럼 "여러 항목을 한꺼번에 준비하는 중"이라는 인상을 주기 좋습니다. 항목 개수를 셀 수 있다면(예: 12개 중 5개 로드됨) 그 값을 progress-bar나 텍스트로 함께 보여주는 게 더 정확합니다.

3×3 같은 격자에서 각 칸의 animation-delay를 행(row)과 열(column)의 합에 비례하게 계산해두면(delay = (row + col) × 0.1초) 왼쪽 위에서 오른쪽 아래로 흐르는 대각선 웨이브가 만들어집니다. 칸마다 scale과 opacity를 함께 움직이면 단순히 밝기만 바뀌는 것보다 입체감이 생깁니다.

칸 수가 많아 화면을 오래 채우는 로딩이면 스켈레톤이 더 적합하고, 200ms 이내로 끝나는 대기라면 생략하세요. role="status"·aria-live="polite"를 감싸는 요소에 주고 칸은 장식이므로 aria-hidden="true"로 숨깁니다. prefers-reduced-motion에서는 대각선 웨이브 대신 격자 전체가 함께 옅게 깜빡이는 정도로 단순화할 수 있습니다.