스피너가 CSS만으로 되어 있나요?

네. 각각은 span 하나(점과 막대 템플릿에는 빈 자식 span 몇 개)와 CSS 애니메이션으로 되어 있습니다. JavaScript도, SVG도, 이미지도, 웹폰트도 없습니다.

동작시키려면 JavaScript가 필요한가요?

아니요. 요소가 문서에 들어가는 순간 애니메이션이 시작됩니다. 코드가 필요한 부분은 언제 보이고 언제 감출지 정하는 것뿐입니다.

속도와 색상을 바꿀 수 있나요?

네. 크기, 선 두께, 애니메이션 길이, 주 색상, 트랙 색상 모두 이 페이지의 조절 항목이며 복사하는 스니펫에 그대로 반영됩니다.

움직임을 줄이고 싶어 하는 방문자는요?

생성되는 모든 스니펫은 prefers-reduced-motion 미디어 쿼리로 끝나 사실상 애니메이션을 멈춥니다. 표시는 그대로 나타나지만, 시스템에서 움직임을 줄인 사람에게는 회전하지 않습니다.

코드는 로컬에서 생성되나요?

네. 설정, 미리보기, 생성된 스니펫 모두 브라우저 안에 머물고 아무것도 업로드되지 않습니다.

분류: 개발 도구

CSS 로딩 스피너 생성기

자체 기획 도구찾는 도구가 없나요?

가벼운 CSS 로더를 로컬에서 디자인하고 코드 복사

실시간 미리보기와 함께 CSS만으로 된 로딩 스피너를 만듭니다. 크기, 색상, 선 두께, 속도를 조정하고 HTML과 CSS 스니펫을 복사하세요. JavaScript도 이미지도 필요 없습니다.

크기 40px선 두께 4px속도 0.9s

색상트랙 색상

클래스 이름

미리보기

HTML

<span class="loader" role="status" aria-label="불러오는 중…"></span>

CSS

.loader {
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 4px solid #dfe4de;
  border-top-color: #2f6f4f;
  border-radius: 50%;
  animation: loader-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader span {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

모든 스니펫은 transform과 opacity만 애니메이션하고 prefers-reduced-motion 블록으로 끝납니다. 시스템에서 동작 줄이기를 설정한 사용자에게는 애니메이션이 멈춥니다.

JavaScript도 이미지도 웹폰트도 없으며, 브라우저 밖으로 나가는 것도 없습니다.

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

로딩 표시는 몇 줄의 CSS가 라이브러리를 확실히 이기는 몇 안 되는 자리입니다. 불러올 스크립트도, 요청할 이미지도, 정작 기다리는 것보다 먼저 초기화할 것도 없습니다. 링, 이중 링, 점, 막대, 펄스 이 다섯 가지 템플릿은 `transform`과 `opacity`만 애니메이션하므로, 브라우저가 프레임마다 레이아웃을 다시 계산하는 대신 컴포지터에서 처리할 수 있습니다. 모든 스니펫은 `prefers-reduced-motion` 블록으로 끝납니다. 스피너는 장식이고, 시스템에 움직임을 멈춰 달라고 요청한 사람이 그것을 지켜볼 이유는 없기 때문입니다. 마크업은 라벨이 붙은 `<span role="status">`라서, 스크린 리더가 빈 상자를 만나는 대신 기다리는 중임을 알립니다.

사용 방법

템플릿을 고르고 크기, 선 두께, 속도, 색상을 설정하세요.
기존 스타일시트와 충돌할 수 있다면 클래스 이름을 바꾸세요.
HTML과 CSS를 프로젝트에 복사하세요.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

스피너가 CSS만으로 되어 있나요?: 네. 각각은 span 하나(점과 막대 템플릿에는 빈 자식 span 몇 개)와 CSS 애니메이션으로 되어 있습니다. JavaScript도, SVG도, 이미지도, 웹폰트도 없습니다.
동작시키려면 JavaScript가 필요한가요?: 아니요. 요소가 문서에 들어가는 순간 애니메이션이 시작됩니다. 코드가 필요한 부분은 언제 보이고 언제 감출지 정하는 것뿐입니다.
속도와 색상을 바꿀 수 있나요?: 네. 크기, 선 두께, 애니메이션 길이, 주 색상, 트랙 색상 모두 이 페이지의 조절 항목이며 복사하는 스니펫에 그대로 반영됩니다.
움직임을 줄이고 싶어 하는 방문자는요?: 생성되는 모든 스니펫은 prefers-reduced-motion 미디어 쿼리로 끝나 사실상 애니메이션을 멈춥니다. 표시는 그대로 나타나지만, 시스템에서 움직임을 줄인 사람에게는 회전하지 않습니다.
코드는 로컬에서 생성되나요?: 네. 설정, 미리보기, 생성된 스니펫 모두 브라우저 안에 머물고 아무것도 업로드되지 않습니다.

이 도구로 할 수 있는 일

사용 방법

개인정보

자주 묻는 질문

관련 도구