Photonix UI - React Components, Templates & Figma Design System

Spinner

A loading indicator for asynchronous processes.

Usage

import { Spinner } from '@photonix/ultimate';

<Spinner size="medium" />

Prop	Type	Default	Description
size	`"small" \| "large" \| "medium"`	`'medium'`	Size of the spinner - small: 16px - medium: 24px (default) - large: 32px
color	`string`	`-`	Custom color for the spinner If not provided, it inherits current text color
variant	`"default" \| "inverse"`	`'default'`	Visual variant - default: Standard colors for light backgrounds - inverse: Inverted colors for dark backgrounds
forceTheme	`"Light" \| "Dark"`	`-`	Force a specific theme's color tokens Useful when component needs to use Light theme tokens regardless of current theme

Available in various sizes.

Small

Medium

Large

Sizes

<Spinner size="small" />
<Spinner size="medium" />
<Spinner size="large" />

Custom colors or inverse variant for dark mode.

Custom Hex

Inverse (On Dark)

Colors

<Spinner color="#007aff" />
<Spinner variant="inverse" />