CSS 로딩 스피너. 8가지 종류, 이미지 없는 순수 CSS.
⏳ 미리보기
사용법
- 스피너 종류 선택 (8종)
- 크기·속도·두께 조정
- 색상 (주 색·트랙·배경) 설정
- HTML+CSS 복사하여 프로젝트에 붙여넣기
주요 기능
- 8가지 종류 (ring·circle·dots·bars·pulse·dual·bouncing·ellipsis)
- 크기·속도·두께 자유 조정
- 주 색·트랙 색·배경 자유 변경
- HTML+CSS 전체 코드 복사
- 이미지 없는 순수 CSS (빠른 로딩)
활용 예시
- 웹사이트 페이지 로딩 — 첫 화면 진입
- 버튼 클릭 로딩 — 폼 제출 시
- API 호출 대기 — 데이터 fetch 중
- 이미지 로딩 — 큰 이미지 lazy load
- 인디케이터 — 진행 중 상태 표시
스피너 선택 가이드
(1) Ring·Circle — 가장 클래식, 모든 상황에 무난. (2) Dots·Ellipsis — "...로딩 중" 느낌, 채팅·메시지 UI. (3) Bars — 음악 재생·이퀄라이저. (4) Pulse — 부드럽고 친근, 모바일 앱. (5) Bouncing — 즐거운 분위기, 게임·아동.
자주 묻는 질문
속도는 어느 정도가 좋나?
0.8~1.2초가 표준. 너무 빠르면 불안, 너무 느리면 멈춘 것처럼 보입니다.
접근성 (스크린리더)?
`role="status"` 속성과 시각적으로 숨긴 텍스트 ("Loading...")를 추가하세요.
SVG 스피너와 비교?
CSS가 더 가볍고 빠릅니다. SVG는 복잡한 모양에만 추천.
무료인가요?
네.