Progress

fandhe-frontend-pre-styled-ui の progress mod が提供するスタイル済み Progress 部品です。

処理の進捗を示す部品です。circle/circle-track/circle-range は headless の inherent メソッドをそのまま呼び出す契約で、value が None（indeterminate）のとき回転アニメーションが付与されます。読み込み中であることのみを示す用途には Spinner を検討してください。

Demo

Circular（SVG）表示の進捗インジケータ。size（sm/md/lg）で --fandhe-progress-size/--fandhe-progress-thickness を切り替えます。indeterminate（不定進捗）は data-state="indeterminate" に連動した回転アニメーションで表示します。

Features

circle/circle-track/circle-range は headless の inherent メソッドをそのまま呼ばせる契約（crates/pre-styled-ui/src/progress.rs テスト caller_headless_circle_parts_render_without_wrapper）
value が None（indeterminate）のとき [data-state="indeterminate"] で回転アニメーションを付与する（progress.rs:55, 66-77）
size variant（progress.rs:243-249）で circle の大きさを切り替える

Anatomy

root
  circle
    circle-track
    circle-range

API Reference

Arguments

Name	Type	Default	Description
size	Size	Md	circle のサイズ（progress.rs:243-249）。
aria_valuetext	Option<&str>	None	aria-valuetext へ渡す表示用テキスト（progress.rs:243-247, 245）。

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
root	data-max	100
root	data-orientation	horizontal
root	data-state	complete, indeterminate, loading
root	data-value	100, 40

CSS Variables

Variable	Default
--fandhe-progress-size	3rem
--fandhe-progress-thickness	0.25rem

Examples

Determinate

value=65 の determinate circle progress の例です。

Accessibility

WAI-ARIA

Attribute	Description
aria-valuetext	呼び出し側が渡した aria_valuetext を root（headless progress.root への委譲）へ出力する（progress.rs:243-247, 245）。