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>
  <For
    each={[
      {
        colorScheme: "green",
        value: 19,
        size: "xs",
      },
      {
        colorScheme: "pink",
        value: 93,
        size: "sm",
      },
      {
        colorScheme: "purple",
        value: 8,
        size: "md",
      },
      {
        colorScheme: "red",
        value: 18,
        size: "lg",
      },
    ]}
  >
    {({ colorScheme, value, size }, index) => (
      <Progress
        key={index}
        aria-label="Storage space"
        colorScheme={colorScheme}
        value={value}
        size={size}
      />
    )}
  </For>
</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