얼마나 걸릴지 알 수 없는 작업 중임을 알리는, 계속 도는 원형 표시기.
디자인 아틀라스<div class="spwrap" role="status" aria-live="polite"><div class="spin"></div><span class="splabel">불러오는 중<i>.</i><i>.</i><i>.</i></span></div>.spwrap{display:grid;place-items:center;gap:12px}
.spin{width:38px;height:38px;border-radius:50%;border:3.5px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.splabel{font-size:12px;color:var(--muted)}
.splabel i{font-style:normal;animation:blink 1.4s infinite}
.splabel i:nth-child(2){animation-delay:.2s}
.splabel i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}role="status"와 aria-live="polite"를 감싸는 요소에 주고, 시각적으로는 숨겨도 되는 텍스트("불러오는 중")를 함께 둡니다. 회전 애니메이션 자체는 장식이라 스크린리더에 그 존재를 알릴 필요가 없지만, "지금 로딩 중"이라는 사실은 텍스트로 전달해야 합니다.
프로그레스 바와의 구분은 앞서 다룬 대로 확정적/비확정적 여부입니다. 스켈레톤과의 차이는, 스피너는 화면 일부(또는 전체)를 가리고 "로딩 중"이라는 사실만 알리는 반면 스켈레톤은 곧 나타날 콘텐츠의 레이아웃을 미리 보여줘서 레이아웃 시프트를 막고 체감 속도를 높입니다.
너무 빨리 사라졌다 나타나는 스피너는 깜빡임으로 느껴지므로, 로딩이 200ms 이내로 끝날 것 같으면 아예 스피너를 보여주지 않는 편이 낫습니다.