LgCircleProgress

LgCircleProgress displays the progress of a task in circular form. Use it when the indicator must remain compact, for example in a card, a summary, or a centered loading view.

<LgCircleProgress Value="75" Min="0" Max="100" />

• Namespace: Lagoon.UI.Components
• Inherits from: LgProgressBase → LgComponentBase
• NuGet package: Lagoon.UI

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple circular progress

Like LgProgress, the component uses Value, Min, and Max. Without Label, the percentage is calculated automatically.

DashboardProgressPage.razor

<LgCircleProgress Value="@Completion"
                  Min="0"
                  Max="100"
                  Kind="Kind.Primary" />

DashboardProgressPage.razor.cs

public partial class DashboardProgressPage : LgPage
{
    // Completion percentage displayed in the circular indicator.
    private int Completion { get; set; } = 75;
}

Custom label

Label replaces the automatic percentage in the center of the circle.

ValidationProgressPage.razor

<LgCircleProgress Value="@ValidatedItems"
                  Min="0"
                  Max="@TotalItems"
                  Label="#ValidationRunning"
                  Kind="Kind.Info" />

ValidationProgressPage.razor.cs

public partial class ValidationProgressPage : LgPage
{
    // Number of items validated by the current task.
    private int ValidatedItems { get; set; } = 8;

    // Total number of items to validate.
    private int TotalItems { get; set; } = 12;
}

Automatic success at end of progress

KindAutoSuccess is true by default: when progress reaches Max, the style becomes Success, unless Kind is Warning or Error.

UploadProgressPage.razor

<LgCircleProgress Value="@UploadedFiles"
                  Min="0"
                  Max="@FileCount"
                  Kind="Kind.Primary"
                  KindAutoSuccess="true" />

UploadProgressPage.razor.cs

public partial class UploadProgressPage : LgPage
{
    // Number of files already uploaded.
    private int UploadedFiles { get; set; } = 5;

    // Total number of files expected.
    private int FileCount { get; set; } = 5;
}

Warning and error states

When Kind is Warning or Error, the end of progress retains this style. This allows displaying a final indicator different from success.

QualityCheckPage.razor

<LgCircleProgress Value="@CheckedRules"
                  Min="0"
                  Max="@TotalRules"
                  Kind="@ProgressKind" />

<LgButton Text="#RunQualityCheck" OnClick="RunQualityCheckAsync" />

QualityCheckPage.razor.cs

public partial class QualityCheckPage : LgPage
{
    // Number of rules already checked by the task.
    private int CheckedRules { get; set; }

    // Total number of rules to check.
    private int TotalRules { get; set; } = 30;

    // Current indicator style, adjusted based on check result.
    private Kind ProgressKind { get; set; } = Kind.Primary;

    // Simulates a quality check and switches to error if a step fails.
    private async Task RunQualityCheckAsync(ActionEventArgs args)
    {
        ProgressKind = Kind.Primary;
        for (int i = 0; i <= TotalRules; i++)
        {
            CheckedRules = i;
            if (i > 20)
            {
                ProgressKind = Kind.Error;
            }
            await Task.Delay(40, args.CancellationToken);
            StateHasChanged();
        }
    }
}

SVG stroke adjustment

CircleDash corresponds to the circumference used to calculate the SVG stroke. Keep the default value unless a theme or custom rendering requires different geometry.

CustomCircleProgressPage.razor

<LgCircleProgress Value="60"
                  Min="0"
                  Max="100"
                  CircleDash="295.31" />

Properties

Name	Type	Default	Declared in	Description
CircleDash	double	295.31	LgCircleProgress	Circumference used to calculate the circular stroke.
KindAutoSuccess	bool	true	LgCircleProgress	Automatically applies a success style when progress is complete, except for warning and error styles.
CssClass	string	null	LgProgressBase	Additional CSS classes applied to the container.
Kind	Kind	Kind.Primary	LgProgressBase	Visual style of the progress.
Label	string	null	LgProgressBase	Label displayed in the center; if absent, a percentage or completion icon is displayed.
Max	int	100	LgProgressBase	Maximum bound of the progress.
Min	int	0	LgProgressBase	Minimum bound of the progress.
Value	int	0	LgProgressBase	Current value of the progress.

Associated enumerations

Kind

Visual style of the component. The default value of LgCircleProgress.Kind is Primary.

Value	Description
Primary	Primary style (default value for LgCircleProgress).
Default	Default style.
Secondary	Secondary style.
Success	Success style.
Error	Error style.
Warning	Warning style.
Info	Information style.

Accessibility

• The component displays a text label or icon in the center of the circle; provide Label when the percentage alone does not explain the task.
• For critical progress operations, place the indicator with a title or adjacent text describing the operation being monitored.
• If you need the attributes role="progressbar", aria-valuenow, aria-valuemin, and aria-valuemax rendered directly, use LgProgress, which exposes them in its markup.

Related components

• LgProgress — progress bar with native ARIA attributes.
• LgLoaderView — loading container using LgCircleProgress by default for determinate progress operations.
• LgBanner — persistent feedback message.