CSS 로더 생성기

스피너 종류를 고르고 크기·색상·속도를 조절하면 실시간 미리보기와 함께 순수 CSS 로더 코드를 만들어 드려요.

–
생성되는 코드는 JavaScript 없이 순수 CSS만으로 동작합니다.

CSS 로더 생성기란?

CSS 로더 생성기는 화면이 로딩 중임을 알려 주는 스피너(로딩 애니메이션)를 코드로 만들어 주는 도구입니다. 원형 회전, 이중 원, 점 바운스, 막대 펄스, 원 펄스, 점 줄이기 등 여러 종류 중 하나를 고르고 크기·색상·속도를 조절하면, 이미지나 JavaScript 없이 순수 CSS의 @keyframes 애니메이션만으로 동작하는 코드를 바로 얻을 수 있습니다. 가볍고 어떤 화면 크기에서도 선명하게 표시됩니다.

사용법

  • 스피너 종류를 선택해 원하는 로딩 모양을 고릅니다.
  • 크기 슬라이더로 로더의 픽셀 크기를 조절합니다.
  • 속도 슬라이더로 애니메이션 한 주기 시간(초)을 정합니다. 작을수록 빠릅니다.
  • 색상을 지정하면 미리보기와 코드에 즉시 반영됩니다.
  • 위쪽 미리보기에서 결과를 실시간으로 확인하고, 코드를 복사해 HTML에 붙여넣습니다.

고를 수 있는 스피너 16종

회전형으로는 원형 회전(Ring), 이중 원 회전(Dual ring), 반원 회전(Spinner), 점 회전(Dot orbit), 사각 회전(Square flip), 시계 바늘(Clock)이 있습니다. 점이나 막대가 차례로 움직이는 형태로는 점 3개 바운스(Dots), 막대 펄스(Bars), 점 줄이기(Ellipsis), 웨이브 막대(Wave), 점 페이드 회전(Spinner dots), 격자 깜빡임(Grid)이 있고, 커졌다 작아지는 형태로는 원 펄스(Pulse), 공 바운스(Bounce), 물결 퍼짐(Ripple), 심장 박동(Heartbeat)이 있습니다. 모두 같은 방식으로 크기·색상·속도를 조절할 수 있습니다.

코드가 만들어지는 방식

결과 영역에는 HTML 요소 한 덩어리와 style 태그로 감싼 CSS가 함께 출력됩니다. HTML은 .loader 클래스를 가진 요소이며, 점이나 막대가 여러 개인 종류는 그 안에 span 요소가 필요한 만큼 들어갑니다. CSS는 .loader 규칙과 애니메이션을 정의하는 @keyframes로 이루어져 있어 JavaScript 없이 그대로 재생됩니다.

슬라이더에서 정한 크기는 테두리 두께, 점 지름, 막대 폭, 요소 사이 간격 계산에 함께 쓰입니다. 크기를 키우면 굵기와 간격도 비례해 커지므로 모양이 무너지지 않습니다. 여러 개가 차례로 움직이는 종류는 속도 값에 비례한 animation-delay가 자동으로 계산되어 각 요소에 배분됩니다.

미리보기와 복사

  • 미리보기 배경을 밝게와 어둡게로 바꿔 가며 다크 모드에서도 잘 보이는 색인지 확인할 수 있습니다.
  • HTML+CSS 전체 복사는 예시 HTML과 style 태그를 함께 복사합니다. 그대로 붙여넣으면 바로 동작합니다.
  • CSS만 복사는 style 태그를 뺀 CSS 규칙만 복사합니다. 이미 스타일시트 파일을 쓰고 있다면 이쪽이 편합니다.

활용 예시

  • 데이터를 불러오는 동안 목록 자리에 스피너를 두어 빈 화면을 피하기
  • 버튼을 누른 뒤 응답을 기다리는 동안 버튼 안에 작은 로더를 넣어 중복 클릭 막기
  • 이미지나 차트가 준비되기 전 자리 표시용으로 사용하기
  • 브랜드 색상을 넣은 로더를 만들어 서비스 전체에서 같은 모양으로 통일하기
  • 이미지·GIF 로더를 CSS로 바꿔 파일 요청 수와 용량 줄이기

주의점과 팁

  • 클래스 이름이 loader이고 애니메이션 이름도 loader-로 시작합니다. 기존 프로젝트에 같은 이름이 있으면 붙여넣기 전에 바꿔 주세요.
  • 0.5초보다 짧은 로딩에는 스피너를 띄우지 않는 편이 오히려 안정적으로 보입니다.
  • 한 화면에 스피너를 여러 개 띄우기보다 큰 영역 하나에 하나만 두는 쪽이 읽기 편합니다.
  • 원형 회전(Ring)은 배경 테두리가 옅은 검정으로 들어가 있어, 어두운 배경에서는 그 값을 밝은 색으로 바꾸면 더 잘 보입니다.
  • 로딩 영역에는 aria-busy나 안내 문구를 함께 두면 화면 낭독기 사용자에게도 상태가 전달됩니다.
  • 움직임에 민감한 사용자를 위해 prefers-reduced-motion 조건에서 애니메이션을 줄이는 규칙을 덧붙이는 것도 좋습니다.

자주 묻는 질문

생성된 로더는 JavaScript가 필요한가요?

아니요. 이 도구가 만드는 로더는 순수 CSS 애니메이션(@keyframes)으로만 동작합니다. HTML 요소와 CSS만 붙여넣으면 JavaScript 없이 자동으로 로딩 애니메이션이 재생됩니다.

속도는 어떻게 조절하나요?

속도 슬라이더는 애니메이션의 한 주기 시간(animation-duration)을 초 단위로 정합니다. 값이 작을수록 빠르게 반복되고, 클수록 느리게 움직입니다. 변경하면 미리보기와 코드가 즉시 갱신됩니다.

만든 로더 코드는 어떻게 사용하나요?

출력된 코드 전체를 복사해 HTML 파일에 붙여넣으면 됩니다. style 태그 안의 CSS가 클래스와 @keyframes를 정의하고, 함께 제공되는 HTML 요소가 로더를 화면에 표시합니다.

색상이나 크기를 나중에 바꿀 수 있나요?

네. 코드 안의 색상 값과 크기(width·height) 값을 직접 수정하면 됩니다. 다시 이 도구에서 옵션을 조절해 새 코드를 받아 교체해도 됩니다.

스피너 종류는 몇 가지인가요?

원형 회전, 이중 원 회전, 점 3개 바운스, 막대 펄스, 원 펄스, 점 줄이기, 반원 회전, 점 회전, 웨이브 막대, 공 바운스, 물결 퍼짐, 격자 깜빡임, 사각 회전, 심장 박동, 점 페이드 회전, 시계 바늘까지 16가지입니다.

CSS만 따로 복사할 수 있나요?

네. CSS만 복사 버튼을 누르면 style 태그를 뺀 규칙과 @keyframes만 복사됩니다. 이미 스타일시트 파일을 쓰고 있다면 이쪽을 쓰고, 예시 HTML까지 필요하면 HTML+CSS 전체 복사를 누르세요.

클래스 이름이 기존 코드와 겹치면 어떻게 하나요?

출력되는 클래스 이름은 loader이고 애니메이션 이름은 loader-로 시작합니다. 프로젝트에 같은 이름이 있다면 붙여넣은 뒤 HTML과 CSS에서 함께 바꿔 주면 됩니다.

어두운 배경에서도 확인할 수 있나요?

미리보기 배경을 밝게와 어둡게 중에서 고를 수 있습니다. 다크 모드에서 색이 묻히지 않는지 확인한 뒤 색상을 정하세요.