Progress is used to display the progress status for a task that takes a long time or consists of several steps.


import { Progress } from "@nature-ui/core";


<Progress value={80} />

Progress with Stripe#

You can add hasStripe prop to any progress bar to apply a stripe via a CSS gradient over the progress bar’s background color.

<Progress hasStripe value={64} isAnimated />

Progress sizes#

There are two ways you can increase the height of the progress bar:

  • You can add size prop to increase the height of the progress bar.
  • You can also use the height prop to manually set a height.
<Stack col>
<Progress size="sm" value={20} />
<Progress size="md" value={20} />
<Progress size="lg" value={20} />
<Progress size="32px" value={20} />

Progress color scheme#

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

<Progress value={20} size={5} indicatorClassName="bg-primary-500" />

Animated Progress#

To show an animated progress, set the value prop to undefined to put the progress component to an indeterminate state.

<Progress size={10} hasStripe isAnimated value={50} />


  • Progress has a role set to progressbar to denote that it is a progress.
  • Progress has aria-valuenow set to the percentage completion value passed to the component, to ensure the progress percent is visible to screen readers.


indicatorClassNamestringbg-blue-500Determines the fill color of the progress bar
hasStripebooleanfalseIf true, the progress bar will show stripe
isAnimatedbooleanfalseIf true, and hasStripe is true, the stripes will be animated
maxnumber-The maximum value of the progress
minnumber-The minimum value of the progress
size"sm" | "md" | "lg" | "number""md"
valuenumberundefinedThe value of the progress indicator. If undefined the progress bar will be in indeterminate state