ComponentsDisplaySpinner

Spinner

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

9 variants6 sizes6 colorsSkeletonOverlay

Variants

Live preview

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

App.tsx

tsx

1import { Spinner } from 'omverse-ui'
2 
3<Spinner variant="circular" />
4<Spinner variant="ring" />
5<Spinner variant="dots" />
6<Spinner variant="bars" />
7<Spinner variant="dual" />
8<Spinner variant="pulse" />
9<Spinner variant="ripple" />
10<Spinner variant="gradient" />

Sizes

Live preview

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

App.tsx

tsx

1<Spinner variant="circular" size="xs" />
2<Spinner variant="circular" size="sm" />
3<Spinner variant="circular" size="md" />
4<Spinner variant="circular" size="lg" />
5<Spinner variant="circular" size="xl" />
6<Spinner variant="circular" size="2xl" />

Colors

Live preview

default, secondary, success, warning, error and white

App.tsx

tsx

1<Spinner variant="circular" color="default"   />
2<Spinner variant="circular" color="secondary" />
3<Spinner variant="circular" color="success"   />
4<Spinner variant="circular" color="warning"   />
5<Spinner variant="circular" color="error"     />
6<Spinner variant="circular" color="white"     />

With label

Live preview

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

Please wait

Fetching data...

App.tsx

tsx

1<Spinner variant="circular" label="Loading..."          />
2<Spinner variant="dots"     label="Please wait"         />
3<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

1import { Skeleton } from 'omverse-ui'
2 
3<Skeleton style={{ width: '100%', height: 20 }} />
4<Skeleton style={{ width: '80%',  height: 20 }} />
5<Skeleton style={{ width: '60%',  height: 20 }} />
6<Skeleton style={{ width: 300,    height: 120, borderRadius: 8 }} />

Props

PropTypeDefaultDescription

size'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl''md'Spinner size

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