Photonix UI - React Components, Templates & Figma Design System

Progress

A linear indicator for task progress.

60%

Usage

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

<Progress value={60} />

Prop	Type	Default	Description
size	`"small" \| "medium"`	`'medium'`	Size of the progress bar - small: 4px height - medium: 8px height (default)
value	`number`	`-`	Current value (0-100) If not provided, shows indeterminate loading animation

Small and medium heights.

Small

Medium

Sizes

<Progress size="small" value={75} />
<Progress size="medium" value={50} />

Use when progress is unknown.

Indeterminate

<Progress />