7onicDESIGN SYSTEM

Spinner

Spinner visually indicates an indeterminate loading state. Four variants — Ring, Dots, Bars, and Orbit — cover data fetching, page transitions, and other async operations where completion time is unknown.

4
Variants
3
Sizes
3
Colors
Pure
React

Playground

Preview
ringdefaultdefault
Variant
Size
Color
Speed
<Spinner />

Variants

Ring
Rotating ring — the most standard loading indicator
Default
Dots
Three dots that sequentially fade in and out
Inline
Bars
Four bars that animate with a wave scale effect
Processing
Orbit
Y-axis 3D rotation — five sub-styles (Ring, Dots, Cube, Flip, Morph)
3D

Sizes

sm
Ring16px
Orbit22px
default
Ring24px
Orbit32px
lg
Ring32px
Orbit44px

Features

Color

Three color options — current inherits the parent text color, blending naturally inside buttons and colored containers

default
primary
current
<Spinner color="default" />
<Spinner color="primary" />
<Spinner color="current" />

Speed

Adjust animation speed in three steps.

slow
default
fast
<Spinner speed="slow" />
<Spinner speed="default" />
<Spinner speed="fast" />

3D Orbit Styles

Compare all five 3D orbit sub-styles side by side.

Ring
Dots
Cube
Flip
Morph
Ring (lg, primary)
Dots (lg, primary)
Cube (lg, primary)
Flip (lg, primary)
Morph (lg, primary)

API

Component Structure

Spinner— Pure React

Standalone component — no sub-components

Props

variant"ring"
"ring" | "dots" | "bars" | "orbit"

Visual variant of the spinner

orbitStyle"ring"
"ring" | "dots" | "cube" | "flip" | "morph"

Orbit sub-style (orbit variant only)

size"default"
"sm" | "default" | "lg"

Size

color"default"
"default" | "primary" | "current"

Color — default: dark, primary: brand, current: inherits parent text color

speed"default"
"slow" | "default" | "fast"

Animation speed

label"Loading"
string

Accessibility label (aria-label)

classNameundefined
string

Additional CSS classes

Anatomy

Ring
1
2
Dots
1
2
3
Bars
1
2
3
4
Orbit (Default: Dual Ring)
1
2
1
Track
Background ring
2
Indicator
Active arc
D
Dots
Sequential fade
O
Orbit
3D rotation

Best Practices

✓

Do

  • ✓Use Spinner for indeterminate waiting times
  • ✓Use size="sm" and color="current" inside buttons
  • ✓Use the dots variant for inline display next to text
✕

Don't

  • ✕Don't use Spinner when progress is measurable — use Progress instead
  • ✕Don't show many Spinners simultaneously on one page
  • ✕Don't use Spinner for post-action feedback — use Toast instead

Accessibility

ARIA / WCAG

  • role="status" applied automatically
  • aria-label="Loading" by default
  • label prop for custom label
  • Screen reader accessible