Components

Spinner

Loading indicator: a thin ring with a spinning arc. Announced as a status (“Loading” by default).

Loading

Usage

Use it to:

  • waits of a second or more inside a region or control

Don’t use it to:

  • loading page content with a known layout (use Skeleton)
  • progress with a known amount (use Progress)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/SpinnerExample.tsx
import { Spinner } from '@krackedui/motion';

export function SpinnerDemo() {
  return (
    <Spinner size="lg" />
  );
}

Examples

Size

LoadingLoadingLoading

Inline loading row

Loading pages

Dark theme

Loading

API Reference

Spinner

A <span role="status">; supports all of its props. Adds:

PropTypeDefault
size
"sm""md""lg"number
"md"
label
string
"Loading"

Accessibility

  • role="status" with visually hidden text, so the wait is announced politely.
  • The ring rotates slower with reduced motion (it conveys state, so it keeps moving).
  • For buttons, use Button loading instead.
© 2026 Motion. Internal documentation.