MakerBox

CSS 로딩 스피너 생성기

순수 CSS 로딩 애니메이션을 6개 그룹, 31종 중에서 고르세요 — 스피너·점·막대·진행 막대·펄스·장난스러운 도형까지.

스타일
스피너
점
막대
진행률
펄스
도형·사물
색상

실시간 미리보기

/* HTML: <div class="loader"></div> */
.loader {
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border: 5px solid color-mix(in srgb, #6c5ce7 22%, transparent);
  border-top-color: #6c5ce7;
  border-radius: 50%;
  animation: loader-rotate 1s linear infinite;
}
@keyframes loader-rotate {
  to { transform: rotate(360deg); }
}
결과 13줄, 336자

스피너 고르고 크기·색·속도 맞추기

스피너 스타일을 고르고 크기·색상·속도·두께를 조절하면, <div class="loader"></div> 하나만으로 동작하는 완결된 CSS 블록을 복사할 수 있습니다. 슬라이더를 움직일 때마다 미리보기가 즉시 갱신되어 원하는 스피너를 정확히 맞춘 뒤 복사할 수 있습니다.

순수 CSS, 자바스크립트 없음

모든 로더는 CSS @keyframes와 단일 요소로만 그려집니다 — 이미지·SVG·자바스크립트·외부 라이브러리가 필요 없습니다. CSS를 스타일시트에 붙여넣고 필요한 곳에 <div class="loader"></div>를 넣기만 하면 됩니다.

그룹별로 무엇에 쓰나

스피너는 링·이중 링·블레이드·링 세그먼트·점선 링·궤도·톱니바퀴·바람개비로, 기본 선택이자 사람들이 "로딩"으로 알아보는 모양입니다. 점과 펄스는 더 얌전해서 작은 인라인 자리에 어울립니다. 막대는 이퀄라이저와 신호 막대로, 기다림보다 활동을 뜻합니다. 얼마나 진행됐는지 알 때는 진행률 그룹을 고르면 됩니다. 막대·줄무늬 막대·파이·도넛·배터리가 있습니다. 도형과 사물은 장난스러운 쪽입니다. 테두리로 그리는 로더(링, 막대)는 두께 값에 반응하고, 전부 크기·색상·속도에 반응합니다.

자주 묻는 질문

로더를 쓰려면 자바스크립트가 필요한가요?

아니요. 각 로더는 100% CSS입니다 — 단일 요소와 @keyframes뿐입니다. CSS를 스타일시트에 복사하고 원하는 위치에 <div class="loader"></div>를 추가하세요.

로더 색상은 어떻게 바꾸나요?

색상 선택기를 쓰거나 옆 칸에 CSS 색상(hex, rgb(), 색 이름)을 입력하세요. 색상은 실시간으로 반영되어 CSS에 그대로 기록됩니다. 색상이 아닌 값은 기본값을 쓰고 칸 아래에 그렇다고 표시합니다.

크기·속도·두께 값은 무엇을 하나요?

크기는 로더 상자 크기(px), 속도는 애니메이션 지속 시간(초, 낮을수록 빠름), 두께는 테두리·막대·바늘로 그려지는 스타일(링 계열, 막대, 물결, 시계, 궤도, 진행 막대, 도넛, 배터리, 톱니바퀴, 신호 막대)의 선 굵기입니다. 두께를 쓰지 않는 스타일에서는 슬라이더가 비활성화되고 그 아래에 이유가 표시됩니다.