CSS 로더 생성기

이 도구는 무엇인가요?

CSS 로더는 콘텐츠가 로딩 중임을 보여주는 작은 애니메이션 요소입니다 — 회전하는 링, 통통 튀는 점들, 맥동하는 원, 움직이는 진행 바 등이며, 자바스크립트 애니메이션 루프나 이미지, GIF가 전혀 필요 없습니다. 요소가 시간에 따라 어떻게 움직이는지 정의하는 @keyframes 블록과 몇 가지 CSS 규칙만으로 만들어집니다.

이 도구는 실제로 동작하는 CSS로 자주 쓰이는 로더 패턴 네 가지를 생성합니다: 테두리 기반으로 회전하는 스피너, 순서대로 튀어오르는 점 세 개, 안팎으로 맥동하는 원, 슬라이딩 채움 효과가 있는 바입니다. 실시간 미리보기에서 크기, 색상, 애니메이션 지속 시간을 조정한 뒤 생성된 CSS와 이에 적용되는 최소한의 HTML을 복사하세요.

출처: CSS Animations Level 1, W3C — 이 로더들이 기반으로 하는 @keyframes와 애니메이션 속성을 정의하는 명세입니다.

왜 사용해야 할까요?

• 스타일, 크기, 색상, 속도를 바꿀 때마다 실시간 미리보기가 즉시 애니메이션되어 실제로 배포할 결과를 그대로 볼 수 있습니다.
• @keyframes 블록까지 포함한 완전한 CSS를 생성해줘서 직접 마무리해야 하는 조각만 주는 게 아닙니다.
• CSS가 필요로 하는 정확한 HTML 마크업까지 함께 출력해 클래스명이나 요소 구조를 추측할 필요가 없습니다.
• 스피너, 점, 맥동, 바까지 네 가지 서로 다른 애니메이션 패턴이 가장 흔한 로딩 상태 사례를 커버합니다.
• 순수 CSS 애니메이션이라 자바스크립트도 이미지 파일도 필요 없고, 애니메이션 GIF보다 더 작고 더 매끄럽습니다.
• 전적으로 브라우저 안에서 동작하며 무료, 가입 불필요.

사용 방법

1. 로더 스타일을 고르세요: 회전 링, 통통 튀는 점, 맥동하는 원, 진행 바.
2. 크기 슬라이더를 드래그해 로더를 키우거나 줄이세요.
3. 색상을 고르세요 — 회전하는 테두리, 점, 또는 바 채움 색인 로더의 강조 색이 됩니다.
4. 속도를 조정해 애니메이션을 빠르거나 느리게 만드세요 — 대부분의 UI 로더는 한 사이클당 0.6초에서 1.5초 사이가 가장 자연스럽게 읽힙니다.
5. 생성된 CSS를 스타일시트에 복사하고, 로더가 필요한 곳에 HTML 스니펫을 붙여넣으세요.

예시

입력

스타일: 회전 링 · 크기: 40px · 색상: 주황색 · 속도: 1.0초

결과

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

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

클래식한 링 스피너입니다 — 세 면은 거의 투명한 테두리, 한 면만 색이 있는 원을 지속적으로 회전시키는 linear·infinite 애니메이션입니다.

애니메이션 GIF 대신 CSS 로더를 쓰는 이유

애니메이션 GIF 스피너는 수년간 기본값이었지만, 오늘날에는 대체로 CSS 로더가 더 나은 선택입니다. 바이너리 이미지 파일 대신 몇백 바이트짜리 텍스트일 뿐이고, 테두리와 transform으로 그려지기 때문에 픽셀 깨짐 없이 어떤 크기로도 확장되며, 새 이미지를 다시 내보낼 필요 없이 CSS 변수 하나만 바꾸면 색을 즉시 바꿀 수 있습니다.

여기 있는 네 가지 스타일 — 스피너, 점, 맥동, 바 — 은 버튼 로딩 상태부터 전체 페이지 오버레이까지 실제 인터페이스에서 가장 자주 등장하는 것들이기도 합니다. 각각 keyframes에서 transform과 opacity 변화만 사용하는데, 이는 브라우저가 나머지 페이지 성능에 지장을 주지 않고 GPU에서 매끄럽게 애니메이션할 수 있는 속성입니다.

상황에 맞는 스타일 고르기

• 회전 링: 가장 무난하고 범용적인 선택 — 버튼 안이나 작은 인라인 로딩 상태에 잘 어울립니다.
• 통통 튀는 점: 더 가볍고 경쾌하게 읽혀서 채팅 '입력 중...' 표시나 짧은 대기 상태에 흔히 쓰입니다.
• 맥동하는 원: 단일 요소 로딩 표시나 '활성/실시간' 상태 점으로 적합합니다.
• 진행 바: 정확한 퍼센트가 없어도 앞으로 나아가는 느낌을 주며, 페이지 로딩이나 다단계 프로세스에서 흔히 기대되는 형태입니다.

프로젝트에서 로더 사용하기

생성된 CSS를 스타일시트에 한 번만 붙여넣은 뒤, 로딩 상태가 필요한 곳이면 어디든 HTML 스니펫을 재사용하세요 — 폼 제출 중인 버튼 안, 데이터를 가져오는 동안의 카드 위, 전체 페이지 오버레이의 중앙 등입니다. 애니메이션이 순수 CSS이기 때문에 켜고 끄는 것도 요소를 DOM에서 추가·제거하거나 display: none으로 숨기는 것만큼 간단합니다.

→ 박스 섀도우 생성기 · CSS 압축기

자주 묻는 질문