LgProgress

LgProgress displays the progress of a task as a horizontal bar. Use it for bounded progress, indeterminate waiting, or a progress state with a label.

<LgProgress Value="35" Min="0" Max="100" />

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

Usage

Demo

Try this component in the Lagoon showcase.

Bounded progress

Set Value, Min, and Max. When Label is not defined, the component automatically calculates a percentage.

ImportProgressPage.razor

<LgProgress Value="@CurrentStep"
            Min="0"
            Max="@TotalSteps"
            Kind="Kind.Primary" />

ImportProgressPage.razor.cs

public partial class ImportProgressPage : LgPage
{
    // Total number of processing steps, used as the maximum bound of the bar.
    private int TotalSteps { get; set; } = 10;

    // Current step: the bar calculates the percentage from this value.
    private int CurrentStep { get; set; } = 4;
}

Custom label and position

Label replaces the automatic percentage. LabelPosition places the text to the left, center, or right of the bar.

ExportProgressPage.razor

<LgProgress Value="@ExportedRows"
            Min="0"
            Max="@TotalRows"
            Label="#ExportInProgress"
            LabelPosition="ProgressLabelPosition.Right" />

ExportProgressPage.razor.cs

public partial class ExportProgressPage : LgPage
{
    // Number of rows already exported, updated by the business processing.
    private int ExportedRows { get; set; } = 120;

    // Total number of rows to export, used to calculate progress.
    private int TotalRows { get; set; } = 500;
}

Striped and animated bar

Striped adds stripes. Animated animates the stripes, which is particularly useful for indicating progress in progress.

SynchronizationPage.razor

<LgProgress Min="0"
            Max="0"
            Value="0"
            Kind="Kind.Info"
            Striped="true"
            Animated="true"
            Label="#SynchronizationInProgress" />

Indeterminate progress

When Max is less than or equal to Min, LgProgress enters an indeterminate state. The bar spans the full width and the automatic label is hidden if you do not provide Label.

Update from code-behind

Update Value from an asynchronous task and call StateHasChanged when progress changes outside the Blazor event cycle.

ProcessingPage.razor

<LgProgress Value="@Value"
            Min="0"
            Max="100"
            Kind="Kind.Success"
            LabelPosition="ProgressLabelPosition.Center" />

<LgButton Text="#RunProcessing" OnClick="RunProcessingAsync" />

ProcessingPage.razor.cs

public partial class ProcessingPage : LgPage
{
    // Current percentage displayed by the progress bar.
    private int Value { get; set; }

    // Simulates a long task and updates the visible progress at each step.
    private async Task RunProcessingAsync(ActionEventArgs args)
    {
        for (int i = 0; i <= 100; i++)
        {
            Value = i;
            await Task.Delay(50, args.CancellationToken);
            StateHasChanged();
        }
    }
}

Usage with Lagoon.Helpers.Progress

To orchestrate tasks with sub-progress, use Lagoon.Helpers.Progress with LgLoaderView. LgProgress remains the visual rendering of the bar when ProgressType is Bar.

BatchLoaderPage.razor

<LgLoaderView Progress="@Progress" ProgressType="ProgressType.Bar">
    @("#BatchCompleted".Translate())
</LgLoaderView>

<LgButton Text="#StartBatch" OnClick="StartBatchAsync" />

BatchLoaderPage.razor.cs

public partial class BatchLoaderPage : LgPage
{
    // Progress object shared with LgLoaderView to control the bar automatically.
    private Progress Progress { get; } = new(100, "#BatchStarting");

    // Feeds the Progress object; LgLoaderView receives events and refreshes the bar.
    private async Task StartBatchAsync(ActionEventArgs args)
    {
        Progress.Reset(100, "#BatchStarting");
        for (int i = 0; i <= 100; i++)
        {
            Progress.Report(i, "#BatchRunning");
            await Task.Delay(25, args.CancellationToken);
        }
    }
}

Properties

Name	Type	Default	Declared in	Description
Animated	bool	false	LgProgress	Animates the bar stripes.
LabelPosition	ProgressLabelPosition	ProgressLabelPosition.Center	LgProgress	Position of the label relative to the bar.
Striped	bool	false	LgProgress	Displays a striped bar.
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 with the progress; if absent, a percentage is generated for bounded progress.
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 LgProgress.Kind is Primary.

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

ProgressLabelPosition

Position of the label displayed by the bar. The default value is Center.

Value	Description
Left	Label displayed to the left of the bar.
Center	Label displayed in the center of the bar (default value).
Right	Label displayed to the right of the bar.

Accessibility

• The inner bar is rendered with role="progressbar", aria-valuenow, aria-valuemin, and aria-valuemax.
• Provide a translated Label when the percentage alone is not sufficient to understand the operation in progress.
• For indeterminate progress, accompany the bar with text describing the wait, for example via Label or a nearby title.

Related components

• LgCircleProgress — circular progress indicator.
• LgLoaderView — loading container that can render a progress bar.
• LgBanner — persistent feedback message.