Open Source

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

Ignite UI for Blazor Circular Progress Indicator コンポーネントは、変更でアプリケーションの進行状況を表す視覚的なインジケーターです。丸形インジケーターは状態変更で外観を更新します。

Blazor Circular Progress の例

使用方法

IgbCircularProgress を使用する前に、次のように登録する必要があります:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule));

また、追加の CSS ファイルをリンクして、スタイルを IgbCalendar コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

<IgbCircularProgress Value=100/>

進行状況タイプ

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

<IgbCircularProgress Value=100 Variant=@ProgressBaseVariant.Success  />

不確定のプログレス

正確に決定されていないプロセスをトラックしたい場合、Indeterminate プロパティを設定できます。また、HideLabel プロパティを設定することで、Ignite UI for Blazor IgbCircularProgress のデフォルトのラベルを非表示にし、公開された LabelFormat プロパティを介して進行状況インジケーターのデフォルトのラベルをカスタマイズできます。



### Indeterminate Progress

If you want to track a process that is not determined precisely, you can set the <ApiLink pkg="core" type="CircularProgress" member="indeterminate" label="Indeterminate" /> property. Also, you can hide the default label of the Ignite UI for Blazor <ApiLink pkg="core" type="CircularProgress" /> by setting the <ApiLink pkg="core" type="CircularProgress" member="hideLabel" label="HideLabel" /> property and customize the progress indicator default label via the exposed `LabelFormat` property.







```razor
<IgbCircularProgress Value=100 Indeterminate=true/>

The following sample demonstrates the above configuration:

Animation Duration

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

<IgbCircularProgress AnimationDuration=5000 Indeterminate=true />

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

For each IgbCircularGradient defined as gradient slot of Ignite UI for Blazor IgbCircularProgress 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.

<IgbCircularProgress>
    <IgbCircularGradient slot="gradient" Offset="0%"   Color="#ff9a40"/>
    <IgbCircularGradient slot="gradient" Offset="50%"  Color="#1eccd4"/>
    <IgbCircularGradient slot="gradient" Offset="100%" Color="#ff0079"/>
</IgbCircularProgress>

Styling

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