Progress

Demo

Features

• Root/Label/ValueText/Track/Range の 5 anatomy パーツ（linear）を提供する値状態機械 Progress。value = None は indeterminate（不定進捗）を表す。
• data-state（"indeterminate"/"loading"/"complete"）は value/min/max から導出され、パーツ関数間で分裂しない。
• min/max/value は Progress::new が fail-closed に正規化する（非有限値・min >= max は既定 (0.0, 100.0) へフォールバック、value は [min, max] へ clamp）。
• Circle（circular 表示）変種の 3 パーツ（circle/circle_track/circle_range）も提供するが、本ページの Demo・Anatomy 表は linear 変種のみを描画対象とする。
• progressbar ロールは非インタラクティブなためキーボード操作を持たない（参照サイト ark-ui / Radix Primitives / Radix Themes / chakra-ui いずれもキーボード操作表を持たない）。

API Reference

Arguments

Data Attributes

Examples

Indeterminate（不定進捗）

value に None を渡すと data-state="indeterminate" となり、aria-valuenow/data-value は出力されません。

自前 CSS の最小例

headless-ui はスタイルレスであるため、track/range/label の data-* 属性セレクタで見た目を組み立てます。

[data-scope="progress"][data-part="track"] {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
}
[data-scope="progress"][data-part="range"] {
  height: 100%;
  background: #2563eb;
  border-radius: inherit;
}
[data-scope="progress"][data-part="range"][data-state="indeterminate"] {
  width: 40%;
  animation: fandhe-progress-indeterminate 1.2s ease-in-out infinite;
}
[data-scope="progress"][data-part="track"][data-orientation="vertical"] {
  width: 8px;
  height: 160px;
}
[data-scope="progress"][data-part="label"][data-orientation="vertical"] {
  writing-mode: vertical-rl;
}
@keyframes fandhe-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}

Accessibility

WAI-ARIA