CSS만으로 만든 로딩 스피너 12종을 미리보고 색상·크기를 변경해 코드를 복사하세요.

로딩 스피너 사용법

  1. 색상과 크기를 조정합니다.
  2. 마음에 드는 스피너를 클릭합니다.
  3. HTML + CSS 코드를 복사해 사용합니다.

주요 기능

  • 12가지 다양한 디자인의 로딩 스피너
  • 색상·크기 자유 조정
  • 외부 라이브러리 불필요 — 순수 CSS
  • 한 번 클릭으로 HTML+CSS 코드 복사

활용 예시

  • API 호출 대기 화면
  • 이미지·동영상 로딩 표시
  • 폼 제출 처리 중 표시
  • 페이지 전환 인디케이터
  • 버튼 클릭 후 처리 중 표시

스피너 디자인 가이드

로딩 스피너는 3초 이내 작업에 사용하세요. 그 이상 걸리는 작업은 진행 표시(progress bar)가 더 좋습니다. 색상은 브랜드 컬러를 사용하면 통일감이 있고, 크기는 본문 글자 크기의 2~4배(32~64px)가 일반적입니다.

자주 묻는 질문

외부 라이브러리(Spinkit 등)가 필요한가요?

아니요. 본 도구의 스피너는 순수 CSS로 만들어져 외부 의존성이 없습니다.

접근성(스크린 리더)에 어떻게?

스피너 요소에 role="status"와 aria-label="로딩 중"을 추가하면 스크린 리더가 읽어줍니다. 시각만으로는 정보가 전달되지 않으니 텍스트도 함께 표시하세요.

모션을 줄이는 사용자에게는?

@media (prefers-reduced-motion: reduce)로 애니메이션을 비활성화하고 정적 아이콘으로 대체하세요.

SVG 스피너가 더 좋지 않나요?

SVG는 더 복잡한 디자인이 가능하지만 CSS는 가볍고 색·크기를 즉시 변경할 수 있어 단순한 스피너에 더 적합합니다.