ComponentsDisplaySpinner

Spinner

Loading indicators in 9 variants with size and color control. Includes Skeleton for shimmer placeholders.

9 variants6 sizes6 colorsSkeletonOverlay

Overview

Loading indicators in 9 variants with size and color control. Includes Skeleton for shimmer placeholders.

Spinner variants

Live preview

Choose one motion style consistently within a product surface.

circular loading
circular loading
ring loading
ring loading
dots loading
dots loading
bars loading
bars loading
dual loading
dual loading
pulse loading
pulse loading
ripple loading
ripple loading
gradient loading
gradient loading
SpinnerExample.tsx
tsx
import { Spinner } from 'omverse-ui'
 
<Spinner variant="circular" />
<Spinner variant="ring" />
<Spinner variant="dots" />
<Spinner variant="bars" />
<Spinner variant="dual" />
<Spinner variant="pulse" />
<Spinner variant="ripple" />
<Spinner variant="gradient" />

Use a spinner for short operations with unknown progress. Use a skeleton when preserving the shape of loading content improves orientation.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose Spinner when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

Variants

Live preview

circular (default), ring, dots, bars, dual, pulse, ripple and gradient

Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
App.tsx
tsx
import { Spinner } from 'omverse-ui'
 
<Spinner variant="circular" />
<Spinner variant="ring" />
<Spinner variant="dots" />
<Spinner variant="bars" />
<Spinner variant="dual" />
<Spinner variant="pulse" />
<Spinner variant="ripple" />
<Spinner variant="gradient" />

Sizes

Live preview

xs, sm, md (default), lg, xl and 2xl

Loading
Loading
Loading
Loading
Loading
Loading
App.tsx
tsx
<Spinner variant="circular" size="xs" />
<Spinner variant="circular" size="sm" />
<Spinner variant="circular" size="md" />
<Spinner variant="circular" size="lg" />
<Spinner variant="circular" size="xl" />
<Spinner variant="circular" size="2xl" />

Colors

Live preview

default, secondary, success, warning, error and white

Loading
Loading
Loading
Loading
Loading
Loading
App.tsx
tsx
<Spinner variant="circular" color="default" />
<Spinner variant="circular" color="secondary" />
<Spinner variant="circular" color="success" />
<Spinner variant="circular" color="warning" />
<Spinner variant="circular" color="error" />
<Spinner variant="circular" color="white" />

With label

Live preview

label adds text — labelPosition controls placement: top, bottom (default), left or right

Loading...
Loading...
Please wait
Please wait
Fetching data...
Fetching data...
App.tsx
tsx
<Spinner variant="circular" label="Loading..." />
<Spinner variant="dots" label="Please wait" />
<Spinner variant="ring" label="Fetching data..." labelPosition="right" />

Skeleton

Live preview

Shimmer placeholders shown while content loads — size via style or className

App.tsx
tsx
import { Skeleton } from 'omverse-ui'
 
<Skeleton style={{ width: '100%', height: 20 }} />
<Skeleton style={{ width: '80%', height: 20 }} />
<Skeleton style={{ width: '60%', height: 20 }} />
<Skeleton style={{ width: 300, height: 120, borderRadius: 8 }} />

Props / API

Api Props

Props

PropTypeDefaultDescription
variant'circular' | 'ring' | 'dots' | 'bars' | 'dual' | 'pulse' | 'ripple' | 'gradient' | 'skeleton''circular'Spinner animation style
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl''md'Spinner size
color'default' | 'secondary' | 'success' | 'warning' | 'error' | 'white''default'Spinner color
labelstringundefinedLabel shown relative to the spinner
labelPosition'top' | 'bottom' | 'left' | 'right''bottom'Position of the label relative to the spinner
overlaybooleanfalseCovers a parent (position: relative) with a semi-transparent overlay