CSS 로더 생성기

작업 경로 / 입력에서 결과까지

CSS 로더를 디자인하는 방법

1. 01

   로더 스타일 선택하기

   로더 스타일을 열고 클래식한 회전 링이면 궤도 링을, 통통 튀는 점 셋이면 점 세 개를 선택하세요. 실시간 미리보기는 변경할 때마다 바로 애니메이션되고, 각 스타일은 볼낼 때 전용 @keyframes를 함께 가져가요.

2. 02

   프레임과 선 크기 정하기

   프레임은 24~160 px, 선이나 점은 2~20 px입니다. 고리 선은 프레임 절반보다 작아야 합니다. 점 세 개와 최소 2 px 간격이 모두 들어가야 하며, 그렇지 않으면 복사와 다운로드가 비활성화됩니다. 내보낸 고리 크기에는 테두리가 포함됩니다.

3. 03

   속도와 색상 조정하기

   사이클 지속 시간을 0.2~4초 사이에서 0.05초 단위로 고르세요. 활성 색상은 링의 위쪽 테두리 또는 가운데 점에, 트랙 색상은 링의 나머지 부분 또는 양쪽 점에 적용됩니다. 느린 사이클은 차분한 백그라운드 작업처럼 보이고, 빠른 사이클은 급한 느낌을 줍니다.

4. 04

   샘플에서 시작할 수도 있습니다

   샘플 불러오기를 누륵면 과감한 점 세 개 프리셋(72px 프레임, 12px 점, 0.75초 사이클, 빨강과 노랑)이 출발점으로 적용됩니다. 초기화는 언제나 기본 궤도 링으로 돌려주세요.

5. 05

   CSS 복사 또는 다운로드하기

   CSS 복사를 눌러 규칙 세트를 클립보드에 담거나, .css 다운로드로 toolars-loader.css를 저장하세요. 출력 패널에는 볼내는 바이트 수가 정확히 표시되고, 어떤 값이든 검증을 통과하지 못하는 동안에는 두 버튼이 모두 비활성화됩니다.

6. 06

   마크업에 연결하기

   궤도 링은 .loader 클래스를 가진 요소 하나면 되고, 점 세 개는 그 안에 span 자식 요소 세 개가 필요합니다. 출력에는 prefers-reduced-motion 블록이 포함돼 움직임에 민감한 방문자에게는 애니메이션이 멈춰요.