Progress

処理の進行状況を視覚的に表示するコンポーネントです。ファイルアップロードやステップ完了率の表示に使用します。

Basic

jui-progress の最も基本的な使用例です。

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`font-variant-numeric: tabular-nums`	等幅数字フォント指定（ちらつき防止）	52+	34+	9.1+	Baseline 2017
CSS Animation	不定形進捗（ローディング）のアニメーション	43+	16+	9+	Baseline 2017
`prefers-reduced-motion`	モーション軽減の考慮	74+	63+	10.1+	Baseline 2020

💡 いずれの機能も主要ブラウザで広く対応済みです。

WAI-ARIA:
- ルート要素に role="progressbar" が自動的に付与されます。
- 不定形（indeterminate）ではない場合、aria-valuenow（現在の値）、aria-valuemin="0"、aria-valuemax（max-valueで指定された値、デフォルト 100）が設定され、支援技術に進捗情報を提供します。
- スクリーンリーダーによる読み上げ用に progress-label 属性で支援技術用ラベルを設定可能です。
モーションの軽減:
- OS レベルでアニメーションの軽減が設定されている場合（prefers-reduced-motion: reduce）、シマー（しずく）アニメーションや回転アニメーションが自動的に停止されます。

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークンを参照してスタイルが適用されます。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`color`	`color`	カラー	`"brand" \| "danger" \| "success" \| "warning"`	`'brand'`
`indeterminate`	`indeterminate`	不定形モード	`boolean`	`false`
`label`	`label`	ラベル	`string`	`''`
`maxValue`	`max-value`	最大値	`number`	`100`
`progressLabel`	`progress-label`	aria-label（i18n対応）	`string`	`'Progress'`
`showValue`	`show-value`	パーセント値表示	`boolean`	`false`
`size`	`size`	サイズ	`"lg" \| "md" \| "sm"`	`'md'`
`value`	`value`	現在値（0〜maxValue）	`number`	`0`
`variant`	`variant`	バリアント	`"bar" \| "circle"`	`'bar'`

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS