로더 · 스켈레톤

기다리는 시간이 1초를 넘을 때. 그보다 짧으면 오히려 깜빡임으로 보입니다.

코드

<span class="jt-loader" role="status" aria-label="불러오는 중"></span>
 
<!-- 화면 골격을 미리 보여주는 방식 -->
<div aria-hidden="true">
  <div class="jt-skeleton" style="height:14px;width:70%"></div>
  <div class="jt-skeleton" style="height:14px;width:45%"></div>
</div>

하지 말 것

• 스켈레톤을 실제 화면과 다른 모양으로 만들지 마세요. 로딩이 끝나는 순간 화면이 튑니다.

접근성

• 로더는 role="status" + aria-label
• 스켈레톤은 aria-hidden="true" — 의미 없는 회색 막대를 읽으면 안 됩니다
• prefers-reduced-motion에서 애니메이션이 자동으로 멈춥니다

앱에서 모양 바꾸기

이 컴포넌트는 별도 노브가 없습니다. 크기·색이 다르게 필요하면 도움말로 요청하세요 — 토큰에 먼저 추가한 뒤 씁니다.

관련