Progress

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

<Progress value={50} />

使い方

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

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

import { Progress } from "@workspaces/ui"

<Progress value={50} />

バリアントを変更する

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

サイズを変更する

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

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

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

形を変更する

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

レンジの色を変更する

レンジの色を変更する場合は、rangeColorに色を設定します。

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

トラックの色を変更する

トラックの色を変更する場合は、trackColorに色を設定します。

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

ストライプを使う

ストライプを使う場合は、stripedをtrueにします。

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

ストライプにアニメーションを使う

ストライプにアニメーションを使う場合は、animatedをtrueに設定します。

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

所要時間を変更する

所要時間を変更する場合は、durationに数値(秒)または文字列を設定します。

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

アニメーションを使う

アニメーションを使う場合は、valueをnullに設定します。

<Progress value={null} />

Props

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.
`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.

アクセシビリティ

Progressは、アクセシビリティに関してWAI-ARIA - Meter Patternに従います。

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

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

コンポーネント	ロールと属性	用途
`Progress`	`role="progressbar"`	プログレスバーであることを示します。
	`aria-valuemin`	最小値を設定します。デフォルト: `0`
	`aria-valuemax`	最大値を設定します。デフォルト: `100`
	`aria-valuenow`	現在の値を表します。
	`aria-label`	現在の進行状況を示すラベルを設定します。