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

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

React Circular Progress の例

使用方法

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

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

import { IgrCircularProgressModule, IgrCircularProgress } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCircularProgressModule.register();

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

<IgrCircularProgress value="100"></IgrCircularProgress>

進行状況タイプ

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

<IgrCircularProgress value="100" variant="success"></IgrCircularProgress>

不確定状態のプログレス

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

<IgrCircularProgress value="100" indeterminate="true"></IgrCircularProgress>

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

アニメーション期間

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

<IgrCircularProgress animationDuration="5000" indeterminate="true"></IgrCircularProgress>

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

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

<IgrCircularProgress >
    <IgrCircularGradient slot="gradient" offset="0%" color="#ff9a40">
    </IgrCircularGradient>
    <IgrCircularGradient slot="gradient" offset="50%" color="#1eccd4">
    </IgrCircularGradient>
    <IgrCircularGradient slot="gradient" offset="100%" color="#ff0079">
    </IgrCircularGradient>
</IgrCircularProgress>

スタイル設定

IgrCircularProgress コンポーネントは、その内部要素のほとんどすべての 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 React フォーラム (英語)
• Ignite UI for React GitHub (英語)