Open Source

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 Progress

If you want to track a process that is not determined precisely, you can set the Indeterminate property. Also, you can hide the default label of the Ignite UI for React IgrCircularProgress by setting the HideLabel property and customize the progress indicator default label via the exposed LabelFormat property.

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

The following sample demonstrates the above configuration:

Animation Duration

You can use the AnimationDuration property on the IgrCircularProgress component to specify how long the animation cycle should take in milliseconds.

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

Gradient Progress

Customizing the progress bar in order to use a color gradient instead of a solid color could be done via the exposed gradient slot and IgrCircularGradient which defines the gradient stops.

For each IgrCircularGradient defined as gradient slot of Ignite UI for React IgrCircularProgress a SVG stop element would be created. The values passed as color, offset and opacity would be set as stop-color, offset and stop-opacity of the SVG element without further validations.

<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>

Styling

The IgrCircularProgress component exposes CSS parts for almost all of its inner elements:

Name	Description
`svg`	The progress SVG element.
`gradient_start`	The progress linear-gradient start color.
`gradient_end`	The progress linear-gradient end color.
`track`	The progress ring’s track area.
`fill`	The progress indicator area.
`label`	The progress label.
`value`	The progress label value.
`indeterminate`	The progress indeterminate state.
`primary`	The progress indicator primary state.
`danger`	The progress indicator error state.
`warning`	The progress indicator warning state.
`info`	The progress indicator info state.
`success`	The progress indicator success state.

Using this CSS parts we have almost full control over the Circular Progress styling.


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);
}