CircleProgress

CircleProgress is a component that displays progress in a circular progress bar.

<CircleProgress.Root value={75} />

Usage

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

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

import { CircleProgress } from "@workspaces/ui"

<CircleProgress.Root>
  <CircleProgress.Label />
</CircleProgress.Root>

Change Variant

<Wrap gap="md">
  <For each={["outline", "subtle"]}>
    {(variant, index) => (
      <CircleProgress.Root value={75} variant={variant} key={index} />
    )}
  </For>
</Wrap>

Change Size

<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <CircleProgress.Root value={75} size={size} key={index} />
    )}
  </For>
</Wrap>

Alternatively, set a string or number to boxSize.

<CircleProgress.Root boxSize="100px" value={31} />

Change Color Scheme

<Wrap gap="md">
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <CircleProgress.Root value={75} colorScheme={colorScheme} key={index} />
    )}
  </For>
</Wrap>

Change Shape

<Wrap gap="md">
  <For each={["rounded", "square"]}>
    {(shape, index) => (
      <CircleProgress.Root value={75} shape={shape} key={index} />
    )}
  </For>
</Wrap>

Apply Animation

Setting value to null will apply animation.

<CircleProgress.Root value={null} />

Change Animation Duration

Set a number to duration.

<CircleProgress.Root duration={2} value={null} />

Change Thickness

To change the thickness of the progress bar, set a string or number to thickness.

<CircleProgress.Root thickness={1} value={31} />

Add Label

75%

<CircleProgress.Root value={75}>
  <CircleProgress.Label>75%</CircleProgress.Label>
</CircleProgress.Root>

Change Color

<CircleProgress.Root rangeColor="red.500" trackColor="blue.500" value={31} />

Props

CircleProgress.Root

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.
`circleProps`	-	`CircleProgressCircleProps` Props for the progress circle element.
`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" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the progress range.
`rangeProps`	-	`CircleProgressRangeProps` Props for the progress range element.
`thickness`	-	`"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "0.5" \| "1.5" \| "1" \| "1/12" ...` The thickness of the progress bar.
`trackColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the progress track.
`trackProps`	-	`CircleProgressTrackProps` Props for the progress track element.
`value`	`0`	`null \| number` The value of the progress. If `null`, the progress will be indeterminate.

CircleProgress.Label

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.

Accessibility

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

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

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

  <CircleProgress.Root value={88} aria-labelledby="label" />
</VStack>

ARIA Roles and Attributes

Component	Role and Attribute	Usage
`CircleProgressCircle`	`role="progressbar"`	Indicates that it is a progress bar.
	`aria-label`	Set the label that describes the current progress, such as `"18 percent"`.
	`aria-valuemin`	Sets the minimum value. Default is `0`.
	`aria-valuemax`	Sets the maximum value. Default is `100`.
	`aria-valuenow`	Sets the current value.