meowerse_
docs menu

Spinner

A small ring that turns while something loads, in three sizes.

import { Spinner } from "@meowerse/ui"; · source packages/ui/src/components/Spinner.tsx

variants and states

small
medium
large

props

proptypedefaultrequired
size"sm" | "md" | "lg" the spinner's size."md"no
labelstring the status label read by assistive tech."loading"no
classNamestring extra class names to append.—no

css custom properties

variabledarklight
--c-accent#00ff82#0a6e3c
--c-line-input#6a6a70#7a7973

Classes: .mw-spinner. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.

usage

small

tsx
import { Spinner } from "@meowerse/ui";

<Spinner size="sm" label="loading" />

html (needs @meowerse/ui/tokens.css)
<span role="status" aria-label="loading" class="mw-spinner mw-spinner--sm"></span>

medium

tsx
import { Spinner } from "@meowerse/ui";

<Spinner label="loading chats" />

html (needs @meowerse/ui/tokens.css)
<span role="status" aria-label="loading chats" class="mw-spinner mw-spinner--md"></span>

large

tsx
import { Spinner } from "@meowerse/ui";

<Spinner size="lg" label="checking your session" />

html (needs @meowerse/ui/tokens.css)
<span role="status" aria-label="checking your session" class="mw-spinner mw-spinner--lg"></span>

accessibility

  • Each spinner is a role="status" with a label.
  • Under reduced motion it stops turning; the label still says what is happening.

do and don't

do

  • Pair a long wait with a StatusLine that says what is happening, and give up with a plain error after a timeout.

don't

  • Don't put several spinners in one view.
  • Don't spin forever.