CSS 로더 생성기(스피너)

CSS 로더는 GIF나 자바스크립트 라이브러리 없이 무언가 진행 중임을 보여 줍니다. 몇 줄의 HTML과 키프레임 애니메이션이면 브라우저가 컴포지터에서 부드럽게 실행합니다. 이 생성기는 링, 이중 링, 튀는 점, 막대, 펄스, 리플, 선 12개짜리 분할형 스피너까지 일곱 가지 대표 디자인을 원하는 색, 크기, 두께, 속도로 만들고, 접근성 상태 라벨과 동작 줄이기 규칙을 함께 넣습니다. 미리보기는 같은 CSS로 그린 움직이는 SVG입니다.

사용 방법

1. 로더 종류를 고릅니다.
2. 색(링은 트랙 색도), 크기, 두께, 한 주기의 길이를 정합니다.
3. "loader"가 기존 CSS와 겹치면 클래스 이름을 바꿉니다.
4. 로더가 나타날 자리에 HTML을, 스타일시트에 CSS를 복사합니다.

계산식

ring: border-top in the color, other borders in the track color, rotate(360deg) every cycle · dots: size ÷ 4 per dot, gap = size ÷ 8, delays −0.32 and −0.16 of a cycle · segments: 12 lines rotated 30° apart, each fading one twelfth of a cycle after the last

transform과 opacity만 애니메이션하므로 브라우저가 페이지 레이아웃을 다시 계산하지 않고 실행할 수 있습니다. 음수 지연은 각 부분을 주기 중간에서 시작시켜 첫 프레임부터 움직이는 것처럼 보이게 합니다.

예시

기본값은 48 px 링에 6 px #e5e7eb 트랙과 #2563eb 호를 두고 초당 한 바퀴 돌립니다. border: 6px solid #e5e7eb; border-top-color: #2563eb; animation: loader-ring 1s linear infinite;입니다. 48 px 튀는 점은 12 px 점 세 개를 6 px 간격으로 놓으며, 주기가 1.5초이면 지연은 −0.48초와 −0.24초입니다.