Progress (プログレス)

Progress コンポーネントは、タスクの進行状況について明確に示し、長くかかるタスクの完了予測を示します。また、正確な完了時刻がわからないシナリオや、注文の履行やファイルのアップロード / ダウンロードなどの一連の小さなタスクの完了に応じて、より大きなワークフローがある場合にも非常に効果的です。Progress コンポーネントは、Ignite UI for Angular Linear Progress コンポーネントおよび Ignite UI for Angular Circular Progress コンポーネントと視覚的に同じものです。

Progress のデモ

形状とタイプ

進行状況インジケーターは、アプリの読み込み、フォームの送信、更新の保存など、進行中のプロセスのステータスをユーザーに通知します。Progress は、さまざまなユースケースとレイアウト要件に適合する 2 つのレイアウト形状をサポートしています: Circular Bar と Linear Bar。これらの各レイアウトには、進行のタイプの追加の選択が付属しています: Determinate (確定) および Indeterminate (不確定)。

Determinate インジケーターは、既知の期間または予想される完了時間を持つタスクまたはプロセスの進行状況を示します。
Indeterminate インジケーターは、プロセスが進行中であることを示しますが、正確な時間や進行状況は不明です。

状態

Progress は、以下のプリセットカラーの組み合わせの 1 つを使用できます。

Default: デフォルトで基本原色を利用します。
Info: info テーマカラーを使用して進行状況を表示
Success: success テーマの色を使用して進行状況を表示します。
Warn: warn テーマの色を使用して進行状況を表示します。
Danger: error テーマカラーを使用して進行状況を表示

Progress の量

確定タイプの Progress を使用する場合、6 種類のパーセント値を Value として選択できます。Figma では、右側のサイドバーにある Value プロパティからバリアントを選択できます。Sketch では、これは Symbol Overrides で簡単に切り替えることができますが、Adobe XD では、Libraries パネルから目的の量をドラッグし、Progress Amount レイヤーの上にドロップしてデフォルト値を変更する必要があります。

ストライプ

Progress コンポーネントに Linear Bar レイアウト形状を使用する場合、Fill 領域のストライプの追加オプションが付属します。Stripes を削除するには、Figma の Striped ブール値プロパティを使用するか、Sketch の 🌈 Stripes カラーオーバーライドを transparent に設定します。

スタイル設定

Progress コンポーネントは、テキストの色、太さ、および位置をカスタマイズするためのさまざまなオプションがあり、高い自由度を持つスタイリングが可能です。さらに、Progress、Base、Stripes、Fill、および Track の色を必要に応じて調整できるため、あらゆるデザインスキームにシームレスに統合できます。

使用方法

Circular Bar は常にテキストラベルの実際の値を使用し、Linear Bar は一般的な文字列をユーザーに表示するのではなく、残りの時間とファイルに基づいてタスクの完了状況の正確な予測を提供します。ただし、両方のバーに不確定バリアントを使用して、確実で明確な完了時間を表示せずに Progress を表示することができます。

良い例	悪い例