Progress

Progress is a component for visually indicating progress.

Import

import { Progress } from "@yamada-ui/react"

Copied!

Usage

Editable example

<Progress value={18} />

Copied!

Change Size

Editable example

<VStack>
  <Progress colorScheme="green" value={19} size="xs" />
  <Progress colorScheme="pink" value={93} size="sm" />
  <Progress colorScheme="purple" value={8} size="md" />
  <Progress colorScheme="red" value={18} size="lg" />
</VStack>

Copied!

Change Color Scheme

Editable example

<Progress colorScheme="purple" value={18} />

Copied!

Change Color

If you want to change the color without using a color scheme, specify the color in filledTrackColor.

Editable example

<Progress filledTrackColor="green.500" value={18} />

Copied!

Customize Style

For example, here is how to round the corners of the bar.

Editable example

<VStack>
  <Progress colorScheme="orange" value={10} borderRadius="sm" />
  <Progress colorScheme="yellow" value={31} rounded="md" />
</VStack>

Copied!

Apply Stripes

By setting hasStripe to true, you can apply stripes to the background color.

Editable example

<Progress hasStripe value={19} />

Copied!

Apply Animation to Stripes

If you want to add animation to the background color stripes, set isStripeAnimation to true.

Editable example

<Progress hasStripe isStripeAnimation value={20} />

Copied!

Apply Animation

Setting isAnimation to true will apply animation.

Editable example

<Progress isAnimation />

Copied!

Edit this page on GitHub

PreviousSkeleton NextCircleProgress