Web Components Circular Progress (円形プログレス) の概要

Ignite UI for Web Components Circular Progress Indicator コンポーネントは、変化していくアプリケーションの処理状況を視覚的に表示します。この円形インジケーターは、状態の変化に応じて表示を更新します。

Web Components Circular Progress の例

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります:

npm install igniteui-webcomponents

次に、以下のように、CircularProgress とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import {defineComponents, IgcCircularProgressComponent} from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCircularProgressComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

CircularProgress の使用を開始する最も簡単な方法は次のとおりです:

<igc-circular-progress value="100"></igc-circular-progress>

進行状況タイプ

Variant 属性を使用して、インジケーターのタイプを設定できます。Circular Progress インジケーターには、primary (デフォルト)、error、success、info、および warning の 5 種類があります。

<igc-circular-progress value="100" variant="success"></igc-circular-progress>

不確定状態のプログレス

進行状況を正確に把握できない処理を表示する場合、Indeterminate プロパティを設定できます。また、HideLabel プロパティを設定することで、Ignite UI for Web Components CircularProgress のデフォルトのラベルを非表示にし、LabelFormat プロパティを使用して進行状況インジケーターのデフォルトのラベルをカスタマイズできます。

<igc-circular-progress value="100" indeterminate="true"></igc-circular-progress>

次のサンプルは、上記の構成を示しています:

アニメーション期間

CircularProgress コンポーネントの AnimationDuration プロパティを使用して、アニメーション サイクルにかかる時間をミリ秒単位で指定できます。

<igc-circular-progress animation-duration="5000" indeterminate></igc-circular-progress>

グラデーション プログレス

gradient スロットと、グラデーション ストップを定義する CircularGradient コンポーネントを使用して、プログレス バーが単色ではなくカラー グラデーションを使用するようにカスタマイズできます。

<igc-circular-progress>
    <igc-circular-gradient slot="gradient" offset="0%" color="#ff9a40"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="50%" color="#1eccd4"></igc-circular-gradient>
    <igc-circular-gradient slot="gradient" offset="100%" color="#ff0079"></igc-circular-gradient>
</igc-circular-progress>

スタイル設定

CircularProgress コンポーネントは、その内部要素のほとんどすべての CSS パーツを公開します。

この CSS パーツを使用すると、Circular Progress のスタイルをほぼ完全に制御できます。

igc-circular-progress {
  margin: 20px;
  --diameter: 50px;
}

igc-circular-progress::part(gradient_end),
igc-circular-progress::part(gradient_start) {
  stop-color: var(--ig-success-200);
}

igc-circular-progress::part(track) {
  stroke: var(--ig-gray-400);
}

API リファレンス

その他のリソース

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)