Progress

Progress is a component for visually indicating progress.

<Progress value={50} />

Usage

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

import { Progress } from "@/components/ui"

import { Progress } from "@workspaces/ui"

<Progress value={50} />

Change Variant

<VStack>
  <For each={["outline", "subtle"]}>
    {(variant, index) => (
      <Progress
        key={index}
        aria-label="Storage space"
        colorScheme="success"
        variant={variant}
        value={50}
      />
    )}
  </For>
</VStack>

Change Size

<VStack>
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <Progress key={index} aria-label="Storage space" value={31} size={size} />
    )}
  </For>
</VStack>

Change Color Scheme

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

Change Shape

<VStack>
  <For each={["rounded", "square", "circle"]}>
    {(shape, index) => (
      <Progress
        key={index}
        aria-label="Storage space"
        shape={shape}
        value={50}
      />
    )}
  </For>
</VStack>

Change Range Color

To change the range color, set rangeColor to a color.

<Progress aria-label="Storage space" rangeColor="green.500" value={18} />

Change Track Color

To change the track color, set trackColor to a color.

<Progress
  aria-label="Storage space"
  trackColor="green/50"
  rangeColor="green"
  value={50}
/>

Stripes

To use stripes, set striped to true.

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

Animated Stripes

To use animated stripes, set animated to true.

<Progress aria-label="Storage space" striped animated value={20} />

Change Duration

To change the duration, set duration to a number (seconds) or a string.

<Progress
  aria-label="Storage space"
  striped
  animated
  duration="3s"
  value={50}
/>

Use Animation

To use animation, set value to null.

<Progress value={null} />

Props

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	`"outline"`	`"outline" \| "subtle"` The variant of the component.
`animated`	`false`	`boolean` If `true`, the progress bar will animate.
`duration`	-	`number \| string` The animation duration in seconds.
`max`	`100`	`number` The maximum value of the progress.
`min`	`0`	`number` The minimum value of the progress.
`rangeColor`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The color of the progress range.
`rangeProps`	-	`ProgressRangeProps` Props for the progress range element.
`shape`	`"rounded"`	`"circle" \| "rounded" \| "square"` The shape of the progress bar.
`striped`	`false`	`boolean` If `true`, the progress bar will show stripe.
`trackColor`	-	`"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` The color of the progress track.
`value`	`0`	`null \| number` The value of the progress. If `null`, the progress will be indeterminate.

Accessibility

The Progress follows the WAI-ARIA - Meter Pattern for accessibility.

Setting aria-label or aria-labelledby on Progress will make it readable by screen readers.

<Progress value={88} aria-label="Central Processing Unit (CPU) Usage" />

<VStack gap="sm">
  <Text as="h3" id="label">
    Central Processing Unit (CPU) Usage
  </Text>

  <Progress value={88} aria-labelledby="label" />
</VStack>

ARIA Roles and Attributes

Component	Role and Attribute	Usage
`Progress`	`role="progressbar"`	Indicates that it is a progress bar.
	`aria-valuemin`	Sets the minimum value. Default: `0`
	`aria-valuemax`	Sets the maximum value. Default: `100`
	`aria-valuenow`	Represents the current value.
	`aria-label`	Set the label that describes the current progress.