CSS 로더 생성기

CSS 로더 생성기란?

CSS 로더 생성기는 라이브러리를 추가하지 않고 순수 CSS 로딩 표시기를 원하는 웹 디자이너와 프론트엔드 개발자를 위한 무료 브라우저 내 도구입니다. 스피너, 링, 도트, 바, 펄스 다섯 가지 스타일 중에서 고르고 픽셀 단위 크기, 주 색상, 한 애니메이션 주기의 초, 선 두께, 도트·바 개수를 조정합니다. 편집하는 동안 미리보기가 애니메이션되고 대응하는 HTML 마크업과 @keyframes가 들어간 CSS style 블록이 즉시 갱신되므로 페이지에 바로 넣을 수 있습니다. 버튼, 페이지 로더, 스켈레톤 상태, 비동기 자리표시자에 활용하거나 CSS 애니메이션과 @keyframes가 각 효과를 어떻게 구동하는지 익히는 데 사용하세요.

CSS 로더 생성기 사용법

1. 로더 스타일을 선택합니다: 스피너, 링, 도트, 바, 펄스.
2. 픽셀 단위로 크기를 설정하고 색 칩으로 고르거나 값을 입력해 색을 정합니다.
3. 한 번의 전체 애니메이션 주기를 초 단위 속도로 설정합니다.
4. '설정'을 열어 선 두께(스피너·링)나 도트·바 개수를 조정합니다.
5. 미리보기가 애니메이션되는 것을 확인한 뒤 복사 버튼으로 생성된 HTML과 CSS를 복사합니다.

예시

스타일: 스피너, 크기 48px, 색상 #4f86f7, 속도 1s, 두께 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

스타일: 도트, 크기 48px, 색상 #9333ea, 속도 1s, 개수 3

<div class="dd-loader"><div></div><div></div><div></div></div> 각 점에 단계적 animation-delay를 줘 물결처럼 커졌다 작아집니다.

자주 묻는 질문

어떤 로더 스타일을 쓸 수 있나요?

다섯 가지입니다: 스피너(회전하는 호), 링(더 두꺼운 회전 링), 도트(물결처럼 커졌다 작아지는 점), 바(위아래로 늘어나는 막대), 펄스(맥동하는 단일 원). 스타일 메뉴로 전환하면 미리보기와 코드가 즉시 갱신됩니다.

크기·색상·속도 컨트롤은 무엇을 하나요?

크기는 로더의 픽셀 크기를, 색상은 주 색상을 설정하고(색 칩으로 고르거나 아무 CSS 색을 입력), 속도는 한 애니메이션 주기의 초입니다. 두께는 스피너와 링의 선을, 개수는 도트나 바가 몇 개 나타날지를 제어합니다.

생성된 CSS는 JavaScript 없는 순수 CSS인가요?

네. 스니펫은 일반 HTML과 CSS 애니메이션·@keyframes를 쓰는 <style> 블록이라 JavaScript나 외부 라이브러리 없이 동작합니다. 페이지에 붙여 넣으면 그 자체로 작동합니다.

두께와 개수가 모든 스타일을 바꾸지 않는 이유는?

두께는 테두리를 그리는 스피너와 링에만, 개수는 여러 요소를 그리는 도트와 바에만 영향을 줍니다. 다른 스타일은 이를 무시하므로 선택한 스타일의 출력이 깔끔하게 유지됩니다.

서버로 업로드되는 것이 있나요?

아니요. 로더와 그 CSS는 로컬 문자열 연산으로 브라우저 안에서 완결됩니다. 어떤 설정, 색상, 코드도 서버로 전송되지 않으므로 오프라인에서도 작동하며 작업 내용이 비공개로 유지됩니다.