CSS 로더가 SVG나 GIF 스피너보다 좋은가요?

대부분의 경우 그렇습니다. CSS 로더는 바이너리 파일이 아니라 몇 줄의 스타일시트로 들어가므로 추가 HTTP 요청도, 디코딩 비용도 없습니다. 어떤 DPI에서도 선명하게 확대됩니다(GIF처럼 픽셀이 깨지지 않음). 색상·크기·속도를 CSS 변수로 런타임에 바꿀 수도 있습니다 — 미리 굽힌 GIF로는 불가능한 일이죠. 단점이라면 여러 도형이 얽히는 복잡한 애니메이션은 여전히 Lottie나 SVG가 쉽다는 것. 64×64 픽셀에 들어가는 로더라면 CSS의 승리입니다.

JavaScript 작업이 무거울 때도 CSS 로더가 부드럽게 도나요?

대체로 그렇습니다. transform과 opacity만 변경하는 애니메이션(이 도구의 모든 로더가 그렇습니다)은 컴포지터 스레드에서 돌기 때문에 메인 스레드가 바빠도 계속 진행됩니다. 예외는 브라우저가 페인트 폭주 상태일 때 — 무거운 스크롤 핸들러나 큰 리플로우는 여전히 프레임을 떨어뜨릴 수 있습니다. 로더가 끊긴다면 거의 항상 답은 메인 스레드에서 작업을 분리하는 것(Web Workers, requestIdleCallback, 또는 페치 중 페이지를 차단하지 않는 것)입니다.

로더를 접근성 있게 만들려면 어떻게 해야 하나요?

세 가지입니다. 첫째, role='status'를 로더 요소에 붙여 보조 기술이 라이브 영역으로 인식하게 합니다. 둘째, aria-label='Loading'(또는 더 구체적인 메시지)을 추가해 스크린리더가 역할만 읽지 않도록 합니다. 셋째, prefers-reduced-motion을 존중하세요 — @keyframes를 미디어 쿼리로 감싸서 OS에서 모션을 끈 사용자에게는 애니메이션을 빼주세요(보통 정적인 점이나 'Loading…' 텍스트가 대안입니다).

스피너와 스켈레톤 스크린은 언제 써야 하나요?

원칙: 1초 미만은 아예 표시하지 마세요(깜빡일 뿐입니다). 1~3초면 스피너로 충분. 3초 이상이라면 스켈레톤이나 프로그레스 바로 바꾸세요 — 닐슨 노먼 그룹 연구에 따르면 콘텐츠의 형태가 미리 보이면 체감 대기 시간이 30~50% 줄어듭니다. 스피너는 무엇이 돌아올지 모르는 무경계 대기(폼 제출, 로그인)에 최적입니다. 스켈레톤은 구조가 예측되는 레이아웃(글 목록, 프로필 페이지)에 가장 잘 어울립니다.

Safari에서 로더가 다르게 보이는 이유는 무엇인가요?

두 가지 흔한 원인이 있습니다. 첫째, Safari의 CSS 애니메이션 엔진은 서브픽셀 변환을 Chromium과 미묘하게 다르게 렌더링합니다 — 회전하는 요소에 transform: translateZ(0)을 더해 컴포지터 레이어를 강제하면 안정됩니다. 둘째, Safari는 다른 브라우저보다 시스템 '동작 줄이기' 설정을 더 적극적으로 따르므로, 망가진 것처럼 보이는 로더가 사실은 사용자 설정일 수 있습니다. '개발자 > 동작 줄이기 비활성화' 메뉴와 실기기에서 같이 확인하세요.

CSS 로더 생성기

JavaScript 없이 CSS만으로 동작하는 로딩 스피너를 만드세요. 6가지 스타일에 색상·크기·속도까지 자유롭게 설정하고, HTML + CSS를 그대로 복사해 프로젝트에 붙여넣을 수 있습니다.

로더 스타일

색상

트랙 색상

크기: 64px

속도 (1회 사이클): 1.0s

선 두께: 6px

실시간 미리보기

HTML + CSS

<!-- HTML -->
<div class="loader" role="status" aria-label="Loading"></div>

<!-- CSS -->
.loader {
  width: 64px;
  height: 64px;
  border: 6px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: loader-spin 1s linear infinite;
}

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

여기 모든 로더는 순수 CSS입니다 — GIF·SVG·JS 애니메이션 라이브러리 없음. 키프레임은 transform·opacity만 변경하므로 GPU 가속이 적용되어 페이지가 바빠도 끊김이 적습니다. 스크린리더가 로딩 상태를 안내하도록 role='status'와 aria-label을 꼭 넣으세요.

사용 방법

1로더 스타일을 고르세요. 스피너는 무난한 기본값이고, 펄스와 점은 더 친근하며, 리플은 주의를 끌고 싶을 때 좋습니다.
2브랜드 컬러를 지정하세요. 기본값인 인디고는 자리 표시일 뿐 — 메인 CTA 색상과 맞춰야 로더가 UI의 일부처럼 보입니다.
3크기를 맥락에 맞추세요. 32~48px은 버튼 안, 64~80px은 인라인 페이지 로더, 100px 이상은 페이지 전체 스플래시일 때만.
4속도를 조정하세요. 0.6초 미만은 조급하게 느껴지고, 0.8~1.2초가 가장 적당하며, 1.5초 이상이면 페이지가 멈춘 것 같이 보입니다. 빠르다고 좋은 게 아닙니다.
5복사 버튼을 누르세요. HTML 마크업과 CSS가 한 번에 출력됩니다 — 스타일시트에 붙여 넣고 필요한 곳에 <div class='loader'>를 두면 끝입니다.

주요 기능

6가지 로더 스타일 — 스피너, 이중 링, 점, 막대, 펄스, 리플 — 흔한 UI 요구를 모두 커버
색상, 크기, 속도, 선 두께를 바꾸면 실시간으로 업데이트되는 미리보기
복붙 가능한 HTML + CSS 출력 — JS, SVG, GIF, 외부 라이브러리 일체 불필요
GPU 친화적인 키프레임(transform·opacity만) — 페이지가 바빠도 부드럽게 동작
role='status'와 aria-label이 기본 포함 — 스크린리더 접근성이 처음부터 챙겨져 있음

자주 묻는 질문

더 알아보기

JavaScript 없는 CSS 로더 — 순수 CSS 스피너 6가지와 상황별 선택 가이드