CSS 로더 생성기
크기, 지속 시간과 색상을 조절하세요. 링은 트랙 색상, 강조 색상과 두께를 개별 설정하며 미리보기와 내보내기는 같은 HTML과 CSS를 사용합니다.
13가지 고정 패턴입니다. 각 유형에 맞는 색상, 선 너비, 간격 또는 링 설정만 표시합니다.
스피너 또는 파문의 선 너비를 조절합니다.
이 미리보기의 동작을 멈춥니다. 내보낸 CSS도 시스템의 동작 줄이기 설정을 따릅니다.
두께는 1–12px이며 크기의 6분의 1 이하입니다.
실시간 미리보기
스피너
미리보기는 장식입니다. 제품에서는 간결하고 안정적인 로딩 상태 문구를 함께 사용하세요.
사용 방법
사용 방법
- 기존 스피너, 점, 막대, 링, 이중 링을 포함한 13가지 중 선택하세요.
- 크기, 지속 시간, 색상과 선 너비, 간격 또는 링 두께를 조절하세요.
- 일반 동작과 동작 줄이기를 비교한 뒤 HTML과 CSS를 복사하세요.
설정과 범위
크기 24–96px, 지속 시간 0.4–3s, 스피너/파문 선 너비와 점, 막대, 격자, 물결 간격은 2–12px입니다. 링 두께는 1–12px이며 크기의 6분의 1 이하입니다. 관련 설정만 표시하며 색상은 6자리 16진수입니다. 여러 도형은 크기로 도형이나 높이를 조절하며 전체 너비에는 간격이 포함됩니다.
미리보기와 내보내기
격리된 스타일 루트에서 내보내기와 같은 HTML과 CSS를 렌더링합니다. 링과 이중 링은 트랙/강조 색상, 나머지 11개는 단색입니다. 맥동은 크기와 투명도, 파문은 확장 링, 격자는 9개 사각형, 궤도는 중심 회전, 뒤집기는 사각형 회전, 추적은 6개 점, 튀기는 2개 원, 물결은 5개 막대를 움직입니다. 고정 패턴만 사용하며 사용자 HTML이나 CSS는 받지 않습니다. 로컬에서 생성합니다.
접근성을 위한 동작
내보낸 HTML은 role="status"와 번역된 로딩 라벨을 포함합니다. CSS는 가상 요소를 포함해 prefers-reduced-motion을 따릅니다. 상태 문구는 안정적으로 유지하고 작업 상태가 바뀔 때만 갱신하세요.
자주 묻는 질문
더 알아보기
내보낸 로더에 JavaScript가 필요한가요?
아니요. 복사한 로더는 HTML과 CSS만 사용합니다.
동작 줄이기가 상태를 없애나요?
아니요. 동작을 멈추고 식별 가능한 정적 로딩 모양과 상태 라벨을 유지합니다.
업로드되는 내용이 있나요?
아니요. 설정, 미리보기와 코드 생성은 브라우저 안에서 처리됩니다.