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

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

Blazor Circular Progress の例

使用方法

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

// in Program.cs file

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

また、追加の CSS ファイルをリンクして、スタイルを IgbCircularProgress コンポーネントに適用する必要があります。以下は、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 プロパティを使用して進行状況インジケーターのデフォルトのラベルをカスタマイズできます。

<IgbCircularProgress Value=100 Indeterminate=true/>

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

アニメーション期間

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

<IgbCircularProgress AnimationDuration=5000 Indeterminate=true />

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

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

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

スタイル設定

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