KARAKURIDESIGN SYSTEM

Progress

Progressは、タスクの進行状況を視覚的に表示するコンポーネントです。 リニアバーと円形の2つのタイプを提供し、ファイルアップロードやステップ進捗など確定的な進行率の表示に使用します。

2
Types
3
Sizes
2
Colors
Radix
Base

Playground

Preview
lineardefault0%
Type
Size
Color
Variant
Options
<Progress value={0} />

Sizes

sm
トラック高さ4px
円形直径32px
default
トラック高さ8px
円形直径48px
lg
トラック高さ12px
円形直径64px

Features

Type

リニアバーと円形の2つのタイプを提供します。用途に応じて使い分けてください。

Striped

variant="striped"で対角線ストライプを表示。animatedを追加すると流れるアニメーションが有効になります。

Show Value

showValueでパーセンテージを表示。formatLabelでカスタムフォーマットが可能です。

75%
75%
75%
750/1000 MB

API

Component Structure

Progress— Radix Progress

スタンドアロンコンポーネント。サブコンポーネントはありません。

Props

type"linear"
"linear" | "circular"

表示タイプ（リニアバーまたは円形）

value0
number

進捗値（0〜max）

max100
number

最大値

size"default"
"sm" | "default" | "lg"

サイズ（linear: トラック高さ、circular: 直径）

variant"default"
"default" | "striped"

視覚バリアント（linearのみ）

color"default"
"default" | "primary"

インジケーターの色（default: ダーク、primary: プライマリー）

indicatorClassNameundefined
string

インジケーターのカスタムクラス（colorを上書き）

showValuefalse
boolean

パーセント値を表示

formatLabelundefined
(value: number, max: number) => string

値のカスタムフォーマッター

animatedfalse
boolean

ストライプの流れアニメーション（striped variant時のみ）

thicknessundefined
number

円形のストローク幅（circularのみ）

labelundefined
string

アクセシビリティラベル

classNameundefined
string

追加のCSSクラス