Indicator

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

Import

tsx

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

Interactively configure the Indicator props below.

Variant

tsx

<Indicator variant="linear" />

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

tsx

<Indicator variant="linear" />

Circular spinner. The size prop controls the diameter in dp; 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 color value.

tsx

<Indicator color="#ef4444" />
<Indicator color="#22c55e" />
<Indicator variant="circular" color="#f59e0b" />

Prop	Type	Default	Description
variant	"linear" \| "circular"	"linear"	Display style — horizontal bar or spinning circle.
size	number	32	Diameter in dp used for the circular variant. Stroke width scales automatically.
color	string	theme.colors.point	Color value for the animated portion. Accepts any valid color string.