MakerBox

CSS 로딩 스피너 생성기

순수 CSS 로딩 스피너를 31종 중에서 고르세요 — 링·점·막대·물결·궤도·동전 뒤집기 등, 실시간 미리보기와 복사용 CSS. JS 없음, 업로드 없음.

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

실시간 미리보기

/* 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); }
}

🔒 브라우저에서 생성되며 업로드되지 않습니다.

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

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

만든 디자인이 어디론가 업로드되나요?

아니요. CSS는 전부 브라우저에서 생성되며 서버로 전송되지 않으므로 오프라인에서도 동작하고 안전합니다.