Skip to main content

Progress

The Progress component in Pearl UI is used to display the progress status for a task that takes a long time or consists of several steps. It is a visual indicator of completion percentage.

Import#

import { Progress } from "pearl-ui";

Usage#

// Basic usage of Progress<Progress />
// Customizing Progress with value prop<Progress value={50} />

Progress Sizes#

The size prop allows you to adjust the size of the progress bar. You can set the value to the keys available in PearlTheme.components.Progress["sizes"], which are "sm", "md", and "lg" in the default component configuration.

<Progress size="xs" /><Progress size="s" /><Progress size="m" /><Progress size="l" />

Progress Variants#

The variant prop allows you to change the appearance of the progress bar. You can set the value to the keys available in PearlTheme.components.Progress["variants"], which are "determinate" and "indeterminate" in the default component configuration.

<Progress variant="filled" value={50} /><Progress variant="outline" />

Progress color scheme#

You can add colorScheme prop to any progress bar to apply any color that exists in the theme.

// Using Progress with different color schemes<Progress colorScheme="success" /><Progress colorScheme="secondary" />

Accessibility#

Progress has a role set to progressbar to denote that it is a progress.

// Example: Progress with 50% completion<Progress value={50} />

Example#

Progress Component Properties#

Supported Styling Properties#

The Progress component is built upon the Box component, hence all properties of Box can be applied to it.

Additional Properties#

NameRequiredTypeDefaultDescription
valueNonumber0Value of the current progress (Between 0 and 100).
sizeNoPearlTheme.components.Progress["sizes"]"m"Defines the size of the progress bar.
variantNoPearlTheme.components.Progress["variants"]"filled"Specifies the variant of the progress bar.
colorSchemeNostring"primary"Specifies the color scheme of the progress bar.