Skip to contentWolf-Rayet

Progress bar

A progress bar communicates the status of a system process.

#Default

Use a progress bar when you know how far along the process is.

import { ProgressBar } from '@wolf-rayet/react';

<ProgressBar value={0.3} label="Importing conversations" />

#Success

Use the success appearance when the process finished.

import { ProgressBar } from '@wolf-rayet/react';

<ProgressBar value={1} appearance="success" label="Import complete" />

#Indeterminate

Leave the value out when the length is unknown.

import { ProgressBar } from '@wolf-rayet/react';

<ProgressBar label="Working" />