Progress

Visualizes a determinate completion value as a linear bar or circular ring.

Import

tsx

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

Playground

Interactively configure the Progress props below.

Variant

Value

Show Label

tsx

<Progress variant="linear" value={50} />

Linear

Horizontal bar at various completion values.

tsx

<Progress value={30} />
<Progress value={60} />
<Progress value={100} />

Linear with Label

Show a percentage label alongside the bar.

Progress

45%

Progress

75%

tsx

<Progress value={45} showLabel />
<Progress value={75} showLabel />

Circular

Ring variant in three sizes with a label in the center.

65%

tsx

<Progress variant="circular" value={65} size={48} showLabel />
<Progress variant="circular" value={65} size={64} showLabel />
<Progress variant="circular" value={65} size={96} showLabel />

API Reference

Prop	Type	Default	Description
value	number	0	Current progress value.
max	number	100	Maximum value used to calculate the percentage.
variant	"linear" \| "circular"	"linear"	Display style — horizontal bar or circular ring.
size	number	64	Diameter in pixels for the circular variant.
barSize	"sm" \| "md" \| "lg"	"md"	Thickness of the progress track, applies to both linear and circular variants.
showLabel	boolean	false	When true, renders a percentage label alongside the progress indicator.