Spinner

Animated SVG ring for loading states. Supports three sizes and color options.

Import

tsx

import { Spinner } from '@velocityuikit/velocityui'

Preview

Sizes

Colors

Props

Prop	Type	Default	Description
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls the width and height of the spinner.
color	`'primary' \| 'muted' \| 'white'`	`'primary'`	The color of the spinner arc.
label	`string`	`'Loading…'`	Screen-reader label set via aria-label on the container.

Examples

Sizes

tsx

import { Spinner } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </div>
  )
}

Colors

tsx

import { Spinner } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
      <Spinner color="primary" />
      <Spinner color="muted" />
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */