CSS 로딩 애니메이션 생성기

생성된 CSS의 동작 방식

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

스피너는 두꺼운 테두리로 그린 원입니다. border-top-color가 링의 위쪽만 포인트 색상으로 칠하므로 링이 호처럼 보이고, @keyframes spin이 호를 중심 기준으로 회전시킵니다. transform: rotate()로 회전하면 브라우저가 요소를 컴포지터에서 움직이기만 하므로 프레임마다 다시 그리는 방식보다 가볍습니다.

페이지에 표시하려면 요소 하나를 추가하고 CSS를 불러오세요:

<div class="loader" role="status" aria-label="로딩 중"></div>

접근성 갖추기

• role="status"를 붙이면 스크린 리더가 스피너를 읽어 줍니다.
• aria-label에는 상태를 나타내는 텍스트를 넣습니다. 예: “로딩 중”.
• 타임아웃 대비책 없이 스피너 뒤로 콘텐츠를 몇 초 이상 가리지 마세요.
• prefers-reduced-motion을 존중하세요. 모션 축소를 선택한 사용자에게는 회전 대신 단순한 페이드나 정적인 “로딩 중…” 텍스트로 바꾸세요:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

스피너를 쓸 때와 낙관적 UI를 쓸 때

• 응답 100ms 미만: 스피너가 필요 없습니다. 사람 눈은 그 지연을 거의 못 느낍니다.
• 100ms ~ 1초: 은은한 스피너(작은 원, 버튼 텍스트 “로딩 중…”)로 중복 클릭을 막습니다.
• 1초 ~ 10초: 눈에 띄는 스피너를 쓰고, 측정할 수 있다면 진행률을 함께 보여 주는 것이 이상적입니다.
• 10초 초과: 스피너로 풀 문제가 아닙니다. 무엇이 느린지 찾아 고치세요.

폼 제출이나 버튼 클릭에는 대개 전체 화면 오버레이보다 버튼 안에 들어가는 스피너가 낫습니다.