Feedback

Progress

Determinate or indeterminate progress indicator in linear or circular shape, with semantic colors, label and value display.

Import

import { Progress } from "@zephora/react";

Examples

Linear

Pass `value` (0–100) for determinate progress; omit it for an indeterminate animation.

Uploading40%

Preparing…

<Progress value={40} label="Uploading" showValue />
<Progress label="Preparing…" />

Circular

Sync72%

<Progress variant="circular" value={72} size="sm" />
<Progress variant="circular" value={72} size="md" showValue label="Sync" />
<Progress variant="circular" size="lg" color="warning" aria-label="Working" />

Colors

<Progress value={80} color="primary" />
<Progress value={80} color="success" />
<Progress value={55} color="warning" />
<Progress value={25} color="danger" />

API

Progress props

Prop	Type	Default	Description
`variant`	`"linear" \| "circular"`	`"linear"`	Shape of the indicator.
`value`	`number`	—	Completion between 0 and 100. Omit for an indeterminate animation.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Track thickness / diameter scale.
`color`	`"primary" \| "success" \| "warning" \| "danger"`	`"primary"`	Semantic color.
`label`	`ReactNode`	—	Visible label rendered above (linear) or below (circular) the track.
`showValue`	`boolean`	`false`	Renders the numeric percentage next to the label (determinate only).
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.