AI 로딩 스피너 생성기.

Create a circular ring spinner with size variants sm 32px, md 48px and lg 64px, each keeping stroke width proportional so the small variant does not read as a thin grey circle. Render one visible arc over a low-contrast full track so the direction of rotation is legible. Wrap it in an element with role="status" and a visually hidden "Loading" label, and set aria-live="polite" so completion is announced once rather than repeatedly. Under prefers-reduced-motion: reduce, replace the rotation with a two-second opacity pulse rather than removing the indicator. Give the wrapper a fixed height matching the largest variant so mounting the spinner does not shift the surrounding layout.

Create a three-dot loading indicator: dots of 8px with 6px gaps, each animating a 400ms vertical bounce staggered by 120ms so the sequence reads left to right. Keep the total width fixed so the row does not reflow as dots move. Wrap it in role="status" with a visually hidden label describing what is loading — "Loading messages" rather than "Loading" — and set aria-live="polite". Under prefers-reduced-motion: reduce, hold the dots static and cross-fade their opacity instead of translating them. Provide a colour prop that inherits currentColor by default so the indicator matches whatever text it sits beside.

Create a button component with a pending state: when pending is true, prepend a 16px ring spinner before the label, set aria-busy="true" and the disabled attribute, and keep the button width identical to its idle state by reserving the spinner space in both. Do not remove the label text — swapping "Place order" for a bare spinner destroys the accessible name mid-interaction. Announce the state change through a separate role="status" element rather than an aria-live on the button itself. Under prefers-reduced-motion: reduce, use an opacity pulse. Block repeat clicks in the handler as well as via the disabled attribute, since disabled arrives one render late.

Create a skeleton loader for a card list: rounded grey blocks matching the real layout — a 40px circle for the avatar, two text bars at 60% and 40% width, and a 160px image block — with a slow left-to-right shimmer. Match the block heights to the rendered content exactly so swapping in real data causes no layout shift. Mark the container aria-busy="true" and aria-hidden on the blocks themselves so screen readers get one status announcement rather than a stream of empty elements. Under prefers-reduced-motion: reduce, drop the shimmer and hold a flat tint. Add a threshold prop so the skeleton only appears after 300ms and never flashes on a fast response.

Create a full-page loading overlay: a translucent scrim over the app with a 64px ring spinner and a short label centered in the viewport. Lock body scroll while visible, mark the underlying content aria-hidden="true", and use role="status" with aria-live="polite" on the overlay so the state is announced once. Trap focus inside the overlay or move focus to the status text so the keyboard cannot reach controls behind the scrim. Delay the appearance by 300ms so a fast response never produces a flash, and fade out over 150ms rather than snapping. Under prefers-reduced-motion: reduce, hold a static indicator with a text label instead of rotating.

Create a determinate circular progress ring driven by a value prop from 0 to 100: an SVG circle whose stroke-dashoffset is computed from the value, with the percentage rendered in the center. Use role="progressbar" with aria-valuenow, aria-valuemin and aria-valuemax, and an aria-label describing the operation. When value is null, fall back to the indeterminate spinning arc with role="status" instead. Animate stroke-dashoffset transitions over 200ms so incremental updates do not appear to jump, and under prefers-reduced-motion: reduce apply the value changes without a transition. Reserve the full ring diameter in layout from the first render.