<Progress> Component

<Progress> is a custom progress bar featuring support for multi bars, animated running progress, text labels, and horizontal/vertical orientation.

Here the demo:

Preview
30%
30%
40%
70%
70%
70%

Installing <Progress> Component

There are 2 ways to install <Progress> component into your react app project:

  • Install the Specific Package of <Progress> Component
  • Install the Whole Reusable-UI Component Pack, including the <Progress> Component

Variant Properties

The alternative appearances of the <Progress> layout without changing the <Progress>'s functionality.

progressStyle Property

Sets the alternative appearances of the <Progress>.

The possible values are:

  • undefined
  • 'regular'
  • 'flat'
  • 'flush'
  • 'joined'

Here the preview:

Preview
30%
30%
30%
30%

Show code

progressBarStyle Property

Sets the alternative appearances of the <ProgressBar>.

The possible values are:

  • undefined
  • 'regular'
  • 'striped'

Here the preview:

Preview
30%
30%

Show code

running Property

Defines the running/stopped state of the <ProgressBar>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
30%

Show code

orientation Property

Sets the orientation of the <Progress>.

The possible values are:

  • undefined
  • 'inline'
  • 'block'

Here the preview:

Preview
30%
30%

Show code

size Property

Defines the alternative size of the <Progress>.

You can set the size individually for each <ProgressBar>.

The possible values are:

  • undefined
  • 'sm'
  • 'md'
  • 'lg'

Here the preview:

Preview
30%
30%
30%
30%
20%
40%

Show code

theme Property

Defines the contextual theme of the <Progress>.

You can set the theme individually for each <ProgressBar>.

The possible values are:

  • undefined
  • 'primary'
  • 'secondary'
  • 'success'
  • 'info'
  • 'warning'
  • 'danger'
  • 'light'
  • 'dark'

Here the preview:

Preview
30%
30%
30%
30%
30%
30%
30%
30%
30%
20%
40%

Show code

gradient Property

Activates a 3D mode of the <Progress>.

You can set the gradient individually for each <ProgressBar>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
30%
30%
30%
30%
30%
30%
30%
30%
30%
20%
40%

Show code

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Progress>.

You can set the outlined individually for each <ProgressBar>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
30%
30%
30%
30%
30%
30%
30%
30%
30%
20%
40%

Show code

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Progress>.

You can set the mild individually for each <ProgressBar>.

The possible values are:

  • undefined
  • 'inherit'
  • true
  • false

Here the preview:

Preview
30%
30%
30%
30%
30%
30%
30%
30%
30%
20%
40%

Show code

nude Property

Activates an nude mode (background-less, padding-less, and border-less) of the <Progress>.

The possible values are:

  • undefined
  • true
  • false

Here the preview:

Preview
30%
30%
30%
30%
30%
30%
30%
30%

Show code

Variables

There are several variables of <Progress> you can customize. Changing the variables affects all <Progress> instance and other components that depend on <Progress>.

Here the exposed variables:

  • Sizes
  • Backgrounds, Foregrounds, Borders, & Rings
  • Animations
  • Spacings

The example of accessing, modifying, & adding variables:

Show code