CSS Loader 생성기
「CSS Loader 생성기」는 코드, 데이터 및 QR 작업을 위한 브라우저 도구입니다. 입력과 결과는 일반적으로 이 기기에서 처리되며 가입이 필요하지 않습니다.
Controls the spinner stroke width.
Stops the animation and shows one stable loading shape.
LIVE PREVIEW
Spinner loader
The animation is decorative in this preview. In a product, pair it with a stable, concise loading status.
사용 방법
사용 방법
- Choose Spinner, Dots, or Bars, then set its size, color, speed, and detail value.
- Inspect the animated preview and turn on Preview reduced motion to see its stable alternative.
- Copy the HTML and CSS, then use a concise loading name that changes only when the actual loading state changes.
Three original CSS-only loader patterns
Spinner uses a rotating bordered circle, Dots uses three scaling circles, and Bars uses three vertically scaling rounded bars. Each pattern is generated from standard CSS without an image, SVG, canvas, font file, external stylesheet, or runtime request. The preview and code remain entirely in this browser.
Motion is optional, status text is deliberate
The generated CSS includes a prefers-reduced-motion rule that stops animation and presents a stable shape. The generated HTML gives the loader role=status and an accessible name, but do not update that name every animation frame or use a live region for decorative motion. Announce concise state changes such as “Loading results” or “Results loaded” once when the real operation begins or finishes.
자주 묻는 질문
더 알아보기
Does the loader announce every animation cycle?
No. The animation is decorative. role=status supplies a polite live-region boundary for meaningful loading-state text, so the text should remain stable during animation and change only when the actual task state changes.
Why include a reduced-motion rule?
Some people request less motion at the operating-system level. The CSS stops the animation for that preference and preserves a recognizable static loading shape.
Can I use the code for a long-running task?
Yes, but pair it with progress, an estimate, a cancel action, or a clear completion message when the task is long enough that a generic spinner does not explain what is happening.