CircleProgress

CircleProgressは、進行状況を円形のプログレスバーで表示するコンポーネントです。

<CircleProgress.Root value={75} />

使い方

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

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

import { CircleProgress } from "@workspaces/ui"

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

バリアントを変更する

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

サイズを変更する

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

または、boxSizeに文字列もしくは数値を設定します。

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

カラースキームを変更する

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

形を変更する

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

アニメーションを適応する

valueをnullに設定すると、アニメーションが適応されます。

<CircleProgress.Root value={null} />

アニメーションの間隔を変更する

durationに数値を設定します。

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

太さを変更する

太さを変更する場合は、thicknessに文字列または数値を設定します。

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

ラベルを追加する

75%

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

色を変更する

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

Props

CircleProgress.Root

Prop	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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.

アクセシビリティ

CircleProgress.Rootにaria-labelまたはaria-labelledbyを設定すると、スクリーンリーダーによって読み上げられます。

<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ロールと属性

コンポーネント	ロールと属性	使い方
`CircleProgressCircle`	`role="progressbar"`	プログレスバーであることを示します。
	`aria-label`	`"18パーセント"`のように現在の進行状況を示すラベルを設定します。
	`aria-valuemin`	`min`の値を設定します。デフォルトは`0`です。
	`aria-valuemax`	`max`の値を設定します。デフォルトは`100`です。
	`aria-valuenow`	現在の値を設定します。

類似のコンポーネント

Progressは、進行状況を視覚的に示すためのコンポーネントです。

Loadingは、データの読み込み中などの待機時間に表示するコンポーネントです。

EmptyStateはリソースが空または利用できない場合に表示するために使用されるコンポーネントです。

Skeletonは、コンテンツが読み込まれるまでのプレースホルダーとして機能するコンポーネントです。

Statusは、プロセスまたは状態のステータスを示すコンポーネントです。

Snacksは、フォームなどで使用される通知を制御するコンポーネントです。

Alertは、ユーザーに情報を伝達するコンポーネントです。

使用しているコンポーネント・フック

Progressは、進行状況を視覚的に示すためのコンポーネントです。