JS 없이 도는 순수 CSS 로더 컬렉션 8종

제작 과정

한 줄 요약

스피너바운스 점이퀄라이저 바펄스플립궤도웨이브필 텍스트 8종을 전부 @keyframes로만 구현하고, currentColor와 CSS 변수(--s)로 색속도를 한 번에 제어합니다.

이럴 때 필요해요

버튼카드페이지 로딩 상태가 필요한데 라이브러리는 과할 때. 클래스 하나로 붙이고 부모 color만 바꾸면 어디든 어울립니다.

어떻게 동작하나

각 로더는 JS 0 transform/opacity 키프레임으로만 움직입니다.
색은 부모 color(=currentColor), 속도는 컨테이너의 --s 변수로 받습니다.
색조속도 슬라이더가 컨테이너 스타일을 바꾸면 8종이 동시에 반응.

놓치기 쉬운 것

지연(delay)을 자식마다 줄 때 nth-child나 인덱스로 계단식 stagger를 줘야 자연스러움.
currentColor를 쓰면 다크/라이트테마 색을 그대로 따라가 재사용성이 큼.
접근성: 로딩 영역엔 aria-busy/role=status 같이 의미를 부여.

이런 곳에 써요

버튼 isLoading페이지 스켈레톤 직전 표시
디자인 시스템의 공통 Spinner 토큰

import type { Metadata } from "next"; import { CssLoadersDemo } from "./-components/CssLoadersDemo"; export const metadata: Metadata = { title: "CSS 로더 컬렉션 (데모)", description: "JS 없이 @keyframes만으로 도는 순수 CSS 로딩 인디케이터 8종 갤러리. currentColor·CSS 변수(--c/--s)로 색·속도를 한 번에 바꾸고, 선택한 로더의 CSS를 복사.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-indigo-50/40"> <CssLoadersDemo /> </main> ); }