Skip to main content

Spinner

A visual loading indicator that provides feedback to users during asynchronous operations and data processing.

Import

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

Display

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

Other links

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

Features

  • Supports responsive sizes.
  • Accepts custom className and attributes.
  • Accessible with aria-label and aria-live.
  • Has a role of progressbar to indicate its purpose in loading states.
Reference Links
WAI-ARIA progressbar role

Sizes

Spinner is available in four sizes: xs, sm, md, and lg. The default size 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..." />

Spinner can adapt its size responsively according to the breakpoint.

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

Color

Spinner supports two color modes. The "default" color uses the foreground design token. The "inherit" color uses currentColor, allowing the spinner to match the color of its parent element.

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

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

Accessibility

Spinner uses role="progressbar" to communicate loading state to assistive technologies, following the WAI-ARIA progressbar role specification.

Description
Uses role="progressbar" to indicate an operation is in progress.
ariaLabel is required and is announced to screen readers when the spinner is present.