Skip to main content

Spinner

Spinner is a loading indicator that shows work is in progress, such as fetching data or processing a payment.

Import

import { Spinner } from '@vortexlabs/vortex';
import type { SpinnerProps } from '@vortexlabs/vortex';

Allied components

Skeleton

Other links

Storybook
<Spinner
  ariaLabel="Content is loading..."
  size="sm"
  color="default"
/>

Features

  • Supports responsive sizes.
  • Can use the default foreground color or inherit its parent's color.
  • Renders an indeterminate progress indicator named with ariaLabel.
Reference Links
WAI-ARIA progressbar role

Sizes

Spinner has four sizes: xs, sm, md, and lg. The default is sm.

<Spinner size="xs" ariaLabel="Content is loading..." />
<Spinner size="sm" ariaLabel="Content is loading..." />
<Spinner size="md" ariaLabel="Content is loading..." />
<Spinner size="lg" ariaLabel="Content is loading..." />

Pass a breakpoint object to change size across breakpoints.

<Spinner size={{ xs: "xs", sm: "sm", lg: "lg" }} ariaLabel="Content is loading..." />

Color

color="default" uses the foreground token. color="inherit" uses currentColor to match the parent, like inside a button.

<Spinner color="default" ariaLabel="Content is loading..." />

<Stack attributes={{ style: { color: "tomato" } }}>
    <Spinner color="inherit" ariaLabel="Content is loading..." />
</Stack>

Accessibility

Spinner renders an indeterminate progress indicator with role="progressbar".

Description
Uses role="progressbar" to indicate an operation is in progress.
ariaLabel is required and names the progress indicator. Spinner does not add an aria-live region.