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 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 Web Components CircularProgress by setting the HideLabel property and customize the progress indicator default label via the exposed LabelFormat property.

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

The following sample demonstrates the above configuration:

Animation Duration

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

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

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 CircularGradient which defines the gradient stops.

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

Styling

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

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

API References

Additional Resources

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub