#Progress

A linear bar for an operation you can measure, or a long or multi-step one where watching it advance is the reassurance — a short in-context wait is a Loader, and a page loading a known layout is Skeleton. value={null} makes it indeterminate: use that rather than a spinner for a long wait you cannot measure, switch to a real number the moment you can, and never fake a percentage. Linear only — the system has no circular progress, so do not hand-roll a ring.

Source · Storybook

#Usage

import { Progress } from '@wallarm-org/design-system/Progress';

#Examples

#Sizes

xs through lg. A thin bar belongs in an inline row; the heavier ones are for an operation the screen is actually about.

#With label

showLabel prints the percentage — worth it on a long or standalone job where the number reassures, noise on a thin inline bar.

#Colors

The full palette, though brand is the default for a reason: reach for another only when the colour says something true about the job, such as red for one that is failing.

#Indeterminate

value={null} cycles the range instead of filling it, which is the honest way to show a long wait you cannot measure.

#Props