videorc/ui

Spinner

The one spinner for work in flight, on the icon set's SpinnerIcon. It announces itself as a status unless it sits beside its own words.

Installation

$ pnpm dlx shadcn@latest add @videorc/spinner

Usage

import { Spinner } from "@/components/ui/spinner";
<Spinner aria-label="Loading scenes" />

Examples

In a button

Beside a pending label ("Saving…") the spinner is decoration: pass aria-hidden and mark it data-icon="inline-start" so the button adjusts its padding.

Theming

Token or attributeMeaning
animate-spinThe turn, which reduced motion stops
size-*Sets a size; without one it takes its slot's icon size, or 1em

Accessibility

On its own the spinner is role="status", named "Loading" or its aria-label. With aria-hidden it drops the role and the name, for a spinner beside its own words or inside a region that already announces the wait.

API reference

Every icon prop (AppIconProps), plus:

Prop

Type

Empty

What a pane or a list says when there's nothing in it. Short muted text, centred, with an optional title and action, and no illustration, media tile or dashed box.

Skeleton

A muted placeholder that pulses where content is loading, on the 8 px row radius.

On this page

InstallationUsageExamplesIn a buttonThemingAccessibilityAPI reference