도구로 건너뛰기
JoeLucky

도구의 ★를 눌러 저장하세요

도구 카테고리

코드 이미지 변환CSS 그라디언트 생성기CSS 글래스모피즘박스 섀도 생성기CSS 로더 생성기SVG 블롭 생성기SVG를 PNG로색상 대비 검사기PX / REM / EM 변환기
JoeLucky

실용적인 온라인 도구를 한곳에서

개인정보처리방침이용약관

© 2026 JoeLucky®. 모든 권리 보유.

  1. JoeLucky
  2. /CSS·디자인
  3. /CSS 로더 생성기

CSS 로더 생성기

순수 CSS로 된 로딩 표시를 만들어 줍니다.

애니메이션 유형 선택

설정

#6366F1
크기40px
속도(초)1.0s

⚡ 값이 작을수록 애니메이션이 빠릅니다

미리보기 — 스피너
CSS 코드
<!-- HTML -->
<div class="loader" style="width:40px;height:40px"></div>

<!-- CSS -->
<style>
.loader {
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>

비슷한 CSS·디자인

전체 보기
코드 이미지 변환

코드 조각을 보기 좋은 스크린샷으로 만들어 줍니다.

열기 →
CSS 그라디언트 생성기

선형, 방사형, 원뿔형 그라디언트를 눈으로 보며 만들고 CSS를 바로 복사합니다.

열기 →
CSS 글래스모피즘

💬 댓글

?

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요!

CSS 로더 생성기이(가) 무엇인가요?

순수 CSS 로딩 애니메이션 10종 중에서 고르고 색상, 크기, 속도를 조절한 뒤 HTML과 CSS를 복사합니다. JavaScript가 필요 없어 어떤 페이지나 프레임워크에도 넣을 수 있습니다.

사용 방법

  1. 10가지 애니메이션 유형 중에서 고르세요: 전체 페이지 로딩용 스피너, 채팅 표시기용 점, 콘텐츠 자리표시자용 스켈레톤, 버튼 피드백용 리플 등.
  2. 왼쪽에서 색상(선택기), 크기(20–80px), 속도(0.3–3.0초)를 조절하세요. 오른쪽의 점선 격자 미리보기가 실시간으로 갱신됩니다.
  3. 속도 값이 낮을수록 애니메이션이 빠릅니다. 대부분의 로더에는 0.8–1.5초가 가장 좋으며 0.5초 미만은 정신없고 2초 초과는 멈춘 듯 느껴집니다.
  4. 미리보기 헤더에 복사 버튼 3개: 마크업만 복사하는 “HTML”, 스타일만 복사하는 “CSS”, 주석이 달린 전체 블록을 복사하는 “모두 복사”.
  5. 모든 애니메이션은 JavaScript 의존성이 전혀 없는 순수 CSS라 정적 HTML, React, Vue 등 어떤 프레임워크에도 바로 붙여넣을 수 있습니다.

자주 묻는 질문

어떤 CSS 로딩 애니메이션이 있나요?

회전하는 원, 튀는 점, 진행 막대, 물결, 펄스 등이 있으며 모두 순수 CSS입니다.

이 애니메이션에 JavaScript가 필요한가요?

아니요. 모든 애니메이션은 JavaScript 의존성이 전혀 없는 순수 CSS입니다.

색상과 크기를 바꿀 수 있나요?

네. 색상 선택기와 크기 조절 컨트롤이 있으며 미리보기와 CSS 출력이 즉시 반영됩니다.

배경 블러와 반투명 테두리 코드를 실시간으로 만들어 줍니다.

열기 →