Progress

Progress is a component for visually indicating progress.

Import

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

Copied!

Usage

Editable example

<Progress aria-label="Storage space" value={18} />

Copied!

Change Size

Editable example

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

Copied!

Change Color Scheme

Editable example

<Progress aria-label="Storage space" 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 aria-label="Storage space" filledTrackColor="green.500" value={18} />

Copied!

Customize Style

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

Editable example

<VStack>
  <Progress
    aria-label="Storage space"
    colorScheme="orange"
    value={10}
    borderRadius="sm"
  />
  <Progress
    aria-label="Storage space"
    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 aria-label="Storage space" 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 aria-label="Storage space" 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