Skip to contentWolf-Rayet

Progress bar

A progress bar shows how far a task has got.

#Default

Use a progress bar when you know how much of the task is done.

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

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

#Success

Use the success appearance when the task has 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" />