CSS 로더 생성기

이 도구 소개

CSS 로더 생성기는 스피너, 튀는 점, 링, 펄스, 막대, 이중 링의 6가지 스타일로 순수 CSS 로딩 애니메이션을 만들며, 크기, 색상, 속도, 두께를 조절하고 CSS와 HTML을 모두 출력합니다.

사용 방법

1. 로더 스타일을 고릅니다.
2. 크기, 색상, 속도, 두께를 조절합니다.
3. 실시간 미리보기를 확인합니다.
4. CSS + HTML 복사를 누르고 둘 다 페이지에 붙여 넣습니다.

알아두면 좋은 점

• 순수 CSS 로더에는 이미지, GIF, JavaScript가 필요 없습니다.
• 스피너는 @keyframes와 transform: rotate()로 회전하므로 효율적으로 애니메이션됩니다.
• 마크업은 요소 하나이며, 점과 막대 스타일은 자식 요소가 몇 개 더 있습니다.
• 스크린 리더가 로더를 안내할 수 있도록 role="status"와 'Loading…' 같은 시각적으로 숨긴 라벨을 추가하세요.
• prefers-reduced-motion 설정에서는 로더를 느리게 하거나 멈추는 것을 고려하세요.

모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.

자주 묻는 질문