Progress (プログレス)
Progress コンポーネントは、タスクの進行状況について明確に示し、長くかかるタスクの完了予測を示します。また、正確な完了時刻がわからないシナリオや、注文の履行やファイルのアップロード / ダウンロードなどの一連の小さなタスクの完了に応じて、より大きなワークフローがある場合にも非常に効果的です。Progress コンポーネントは、Ignite UI for Angular Linear Progress コンポーネントおよび Ignite UI for Angular Circular Progress コンポーネントと視覚的に同じものです。
Progress のデモ
![](../images/progress_demo.png)
形状とタイプ
進行状況インジケーターは、アプリの読み込み、フォームの送信、更新の保存など、進行中のプロセスのステータスをユーザーに通知します。Progress は、さまざまなユースケースとレイアウト要件に適合する 2 つのレイアウト形状をサポートしています: Circular Bar と Linear Bar。これらの各レイアウトには、進行のタイプの追加の選択が付属しています: Determinate (確定) および Indeterminate (不確定)。
- Determinate インジケーターは、既知の期間または予想される完了時間を持つタスクまたはプロセスの進行状況を示します。
- Indeterminate インジケーターは、プロセスが進行中であることを示しますが、正確な時間や進行状況は不明です。
![](../images/progress_circular_determinate.png)
![](../images/progress_linear_determinate.png)
![](../images/progress_circular_indeterminate.png)
![](../images/progress_linear_indeterminate.png)
状態
Progress は、以下のプリセット カラーの組み合わせの 1 つを使用できます。
- Default: デフォルトで基本原色を利用します。
- Info:
info
テーマ カラーを使用して進行状況を表示 - Success:
success
テーマの色を使用して進行状況を表示します。 - Warn:
warn
テーマの色を使用して進行状況を表示します。 - Danger:
error
テーマ カラーを使用して進行状況を表示
![](../images/progress_default.png)
![](../images/progress_info.png)
![](../images/progress_success.png)
![](../images/progress_warn.png)
![](../images/progress_danger.png)
Progress の量
確定タイプの Progress を使用する場合、6 種類のパーセント値を Value として選択できます。Figma では、右側のサイドバーにある Value
プロパティからバリアントを選択できます。Sketch では、これは Symbol Overrides
で簡単に切り替えることができますが、Adobe XD では、Libraries
パネルから目的の量をドラッグし、Progress Amount
レイヤーの上にドロップしてデフォルト値を変更する必要があります。
![](../images/progress_circular-progress-amount.png)
![](../images/progress_linear-progress-amount.png)
ストライプ
Progress コンポーネントに Linear Bar レイアウト形状を使用する場合、Fill 領域のストライプの追加オプションが付属します。Stripes を削除するには、Figma の Striped
ブール値プロパティを使用するか、Sketch の 🌈 Stripes
カラー オーバーライドを transparent
に設定します。
![](../images/progress_linearstripes.png)
スタイル設定
Progress コンポーネントは、テキストの色、太さ、および位置をカスタマイズするためのさまざまなオプションがあり、高い自由度を持つスタイリングが可能です。さらに、Progress、Base、Stripes、Fill、および Track の色を必要に応じて調整できるため、あらゆるデザイン スキームにシームレスに統合できます。
![](../images/progress_striped.png)
![](../images/progress_clear.png)
![](../images/progress_twocolor.png)
使用方法
Circular Bar は常にテキスト ラベルの実際の値を使用し、Linear Bar は一般的な文字列をユーザーに表示するのではなく、残りの時間とファイルに基づいてタスクの完了状況の正確な予測を提供します。ただし、両方のバーに不確定バリアントを使用して、確実で明確な完了時間を表示せずに Progress を表示することができます。
良い例 | 悪い例 |
---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。