Progress
fandhe-frontend-pre-styled-ui の progress mod が提供するスタイル済み Progress 部品です。
処理の進捗を示す部品です。linear（Track/Range）と circular（SVG の Circle/CircleTrack/CircleRange）の両方に対応します。track/circle 系は headless の inherent メソッドをそのまま呼び出す契約で、動的な --fandhe-progress-percent を持つ range のみ styled range() ラッパーを経由します。ProgressProps（size/variant/palette の 3 軸）を root へ渡すことで、サイズ（xs〜xl）・track の見た目（outline/subtle/plain）・range の塗り色（accent/info/success/warning/danger/neutral）を切り替えられます。value が None（indeterminate）のときはアニメーション（linear は横スライド、circular は回転）が付与され、prefers-reduced-motion: reduce 環境では停止します。circular の indeterminate は回転に加え circle-range へ円周の 1/4 分の固定弧（stroke-dasharray）を与え、完全なリング（complete）と視覚的に区別します。この弧に animation は使わないため、prefers-reduced-motion: reduce 環境でも静止した弧として残ります。読み込み中であることのみを示す用途には Spinner を検討してください。
イシュー #2049 で shadcn/ui と突合し、既存の Outline（中立トラック + 淡い内側枠線）・Subtle（palette 淡色トラック）では表現できなかった「枠線なしの中立トラック」を ProgressVariant::Plain（shadcn/ui 既定表現に相当）として補完しました。既存 2 variant の CSS 出力・既定 variant はバイト不変です。
marker_group/marker でマイルストーンの目盛りラベルを opt-in で追加できます（イシュー #3140）。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
Linear（Track/Range）と Circular（SVG）両対応の進捗インジケータ。size（xs〜xl）で --fandhe-progress-track-height/--fandhe-progress-size/--fandhe-progress-thickness を、variant（outline/subtle/plain）で track の見た目を、color-palette（accent/info/success/warning/danger/neutral）で range の塗り色を切り替えます。plain は shadcn/ui 既定表現（枠線なしの中立トラック）を補完した variant です（イシュー #2049）。indeterminate（不定進捗）は data-state="indeterminate" に連動したアニメーション（linear は横スライド、circular は回転）で表示し、prefers-reduced-motion: reduce では停止します。circular の indeterminate は回転に加え circle-range へ円周の 1/4 分の固定弧（stroke-dasharray）を持ち、complete（完全リング）と視覚的に区別されます（イシュー #1688）。この弧は animation を持たないため、prefers-reduced-motion: reduce でも静止した弧として残ります。
Features
- track/range（linear）と circle/circle-track/circle-range（circular）はいずれも headless の inherent メソッドをそのまま呼ばせる契約（crates/pre-styled-ui/src/progress.rs テスト caller_headless_track_and_circle_parts_render_without_wrapper）
- value が None（indeterminate）のとき [data-state="indeterminate"] でアニメーション（linear は横スライド・circular は回転）を付与し、prefers-reduced-motion: reduce で停止する
- ProgressProps（size/variant/color-palette の 3 軸）を root へ付与する。styled range() が --fandhe-progress-percent を determinate 時のみ付与する
- circle-range の [data-state="indeterminate"] へ固定長の弧（--fandhe-progress-circumference = 2πr、stroke-dasharray で円周の 1/4）を与え、circle の回転と組み合わせて complete（完全リング）と視覚的に区別する。新規 @keyframes は追加せず reduced-motion 下でも弧が残る（crates/pre-styled-ui/src/progress.rs rustdoc「イシュー #1688: circle-range indeterminate の固定弧」節・テスト circle_range_indeterminate_state_declares_fixed_arc_dasharray）
- ProgressVariant::Plain（枠線なしの中立トラック）は shadcn/ui 既定表現を突合して補完した variant（イシュー #2049）。既存 Outline/Subtle の CSS 出力・既定 variant はバイト不変（crates/pre-styled-ui/src/progress.rs rustdoc「イシュー #2049: shadcn/ui との突合」節）
- marker_group/marker（pre-styled-only パート）でマイルストーンの目盛りラベルを opt-in で追加できる。data-state（under-value/at-value/over-value）は value と現在値の比較で自前算出し、呼び出し側 attrs の data-state 偽装は除去する（イシュー #3140、crates/pre-styled-ui/src/progress.rs rustdoc「イシュー #3140」節）
Anatomy
root
label
value-text
track
range
circle
circle-track
circle-rangeAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
props | &ProgressProps | ProgressProps::default() | size（既定 Md）/variant（既定 Outline、Outline/Subtle/Plain の 3 値）/palette（既定 Accent）の 3 軸をまとめた設定（progress.rs）。 |
aria_valuetext | Option<&str> | None | aria-valuetext へ渡す表示用テキスト（progress.rs）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
circle | data-state | complete, indeterminate, loading |
circle-range | data-state | complete, indeterminate, loading |
circle-track | data-state | complete, indeterminate, loading |
label | data-orientation | horizontal |
label | data-state | complete, indeterminate, loading |
range | data-orientation | horizontal, vertical |
range | data-state | complete, indeterminate, loading |
root | data-max | 100 |
root | data-orientation | horizontal, vertical |
root | data-state | complete, indeterminate, loading |
root | data-value | 100, 40, 65 |
track | data-orientation | horizontal, vertical |
track | data-state | complete, indeterminate, loading |
value-text | data-state | complete, indeterminate, loading |
CSS Variables
| Variable | Default |
|---|---|
--fandhe-progress-circumference | — |
--fandhe-progress-percent | 0% |
--fandhe-progress-size | 3rem |
--fandhe-progress-thickness | 0.25rem |
--fandhe-progress-track-bg | var(--fandhe-color-bg-muted) |
--fandhe-progress-track-height | 0.625rem |
--fandhe-progress-track-length | 12rem |
--fandhe-progress-track-shadow | inset 0 0 0 1px var(--fandhe-color-border-muted) |
Examples
Determinate (linear)
value=65 の determinate linear progress（Track/Range）の例です。
Determinate (circular)
value=65 の determinate circular progress（SVG）の例です。
Indeterminate (circular)
value=None の indeterminate circular progress の例です。circle 全体の回転に加え、circle-range へ円周の 1/4 分の固定弧（stroke-dasharray）を与え、complete（完全なリング）と区別します（イシュー #1688）。
Label + Value (Plain variant)
shadcn/ui 既定表現（枠線なしの中立トラック）に相当する ProgressVariant::Plain の例です。label + value 併記で shadcn の "Label and Value" 例をノード木 API で再現しています（イシュー #2049）。
Milestone labels
value=37.5 の determinate linear progress の下へ、marker_group/marker でマイルストーンの目盛りラベル（準備 → 処理 → 仕上げ → 完了）を opt-in で追加した例です。到達済みラベル（準備・処理）は強調色、先頭は左揃え・末尾は右揃えになります（イシュー #3140）。
Accessibility
WAI-ARIA
| Attribute | Description |
|---|---|
| aria-valuetext | 呼び出し側が渡した aria_valuetext を root（headless progress.root への委譲）へ出力する（progress.rs）。 |