MindeesUI
ComponentsDisplay

Progress

Linear progress bar accepting a 0 to 1 value or null for indeterminate state, with semantic tone tokens and configurable height.

Progress is a horizontal progress track. Pass a normalised value between 0 and 1 for determinate progress, or omit the value (or pass null) for an indeterminate placeholder. Values outside the range are clamped automatically.

Import

import { Progress } from '@mindees/ui';

Usage

<Progress value={0.42} tone="primary" />

<Progress value={null} />

<Progress value={1} tone="success" height={4} />

Props

PropTypeDefaultDescription
valuenumber | nullProgress in the range 0 to 1. Clamped to [0, 1]. Pass null or omit to render an indeterminate 30%-wide fill.
tone'primary' | 'success' | 'warning' | 'danger''primary'Fill colour pulled from semantic tokens.
heightnumber8Track height in dp. The border radius is automatically half the height.

Accessibility

The track uses accessibilityRole="progressbar". Determinate values are reported via accessibilityValue as { now, min: 0, max: 100 } (rounded percent). Indeterminate progress reports { text: 'Loading' }.

On this page