Indicator

An indeterminate loading animation available as a linear bar or circular spinner.

Import

tsx

import { Indicator } from '@tac-ui/web';

Interactively configure the Indicator props below.

Variant

tsx

<Indicator variant="linear" />

Horizontal indeterminate progress bar that slides a gradient segment across the track width, suitable for page-level loading states.

tsx

<Indicator variant="linear" />

Circular spinner using a conic-gradient mask technique. The size prop controls the diameter in pixels; stroke width scales proportionally.

tsx

<Indicator variant="circular" size={24} />
<Indicator variant="circular" size={32} />
<Indicator variant="circular" size={48} />

Use the color prop to customize the animated portion with any CSS color value or design token variable.

tsx

<Indicator color="var(--error)" />
<Indicator color="var(--success)" />
<Indicator variant="circular" color="var(--warning)" />

Prop	Type	Default	Description
variant	"linear" \| "circular"	"linear"	Display style — horizontal bar or spinning circle.
size	number	32	Diameter in pixels used for the circular variant. Stroke width scales automatically.
color	string	var(--point)	CSS color value for the animated portion. Accepts any valid CSS color or token variable.
className	string	-	Additional CSS class names applied to the root element.