Progress Indicator

プログレスインジケーターは任意の処理の進行状況を視覚的に提示するために使用するコンポーネントです。

Anatomy: 解剖図

Item	Name	Description	Component	Optional
1	Track	Progress Indicatorの入れ物		—
2	Indicator	進捗率		任意

bar

横長に進捗を示すインジケーター。

処理時間や進捗が明確な場合に、状況を示すのに適しています。

circle

円形の進捗を示すインジケーター。

処理時間や進捗が明確な場合に、状況を示すのに適しています。

また、全体量や処理時間が不明なものに対して使用することもあります。

25%

進捗率が全体の25%の状態

50%

進捗率が全体の50%の状態

75%

進捗率が全体の75%の状態

100%

進捗が完了している状態

アクセシビリティを考慮し、原則ラベルと合わせて使用するようにしてください。

Don’t

同じ要素やアクションに対しては、同じインジケーターを使用してください。

Date	Changes
2025/06/27	ドキュメント公開
2025/06/18	ドキュメントを更新

小さな気づきや違和感があれば、
お気軽に教えてください。