Spinner

Spinner is the loading indicator for pending states and asynchronous actions.

Overview

Spinner is styled through one local color variable and size-specific width mappings.

Public CSS Variables

Variable	Value	Affects
effective spinner colorroot		No visible change in this state
rendered spinner diameterroot		No visible change in this state
stroke thicknessroot		No visible change in this state
primary spinner colorprimary variant		No visible change in this state
secondary spinner colorsecondary variant		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root uses a radial/conic gradient plus mask to render the animated ring.

State And Variant Interaction

data-size maps to size and stroke width tokens
data-variant='primary' uses --color-primary-500
data-variant='secondary' uses --color-secondary-500

Examples

Secondary loading indicator

LTRRTL

secondary-loading-indicator.tsx · 13 lines

import { Spinner, Text } from '@vega-ui/react';
import { useId } from 'react';

export default function SecondaryLoadingIndicator() {
  const labelId = useId();

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-4)' }}>
      <Spinner size={5} variant='secondary' aria-labelledby={labelId} />
      <Text id={labelId} size={5}>Generating preview</Text>
    </div>
  );

Do Not Override

breaking contrast between spinner and background
using oversized spinners in dense controls