Progress

Usage

<div class="w-full flex flex-col gap-4">
    <LumexProgress Value="60" aria-label="Loading..." />
</div>

Make sure to pass the aria-label attribute when the Label prop is not provided. This is required for accessibility.

Sizes

Use the Size parameter to control the height of the progress bar.

<div class="w-full flex flex-col gap-4">
    <LumexProgress Value="30" Size="@Size.Small" aria-label="Loading..." />
    <LumexProgress Value="40" Size="@Size.Medium" aria-label="Loading..." />
    <LumexProgress Value="50" Size="@Size.Large" aria-label="Loading..." />
</div>

Colors

Use the Color parameter to set the color of the progress bar.

<div class="w-full flex flex-col gap-4">
    <LumexProgress Value="70" Color="@ThemeColor.Default" aria-label="Loading..." />
    <LumexProgress Value="70" Color="@ThemeColor.Primary" aria-label="Loading..." />
    <LumexProgress Value="70" Color="@ThemeColor.Secondary" aria-label="Loading..." />
    <LumexProgress Value="70" Color="@ThemeColor.Success" aria-label="Loading..." />
    <LumexProgress Value="70" Color="@ThemeColor.Warning" aria-label="Loading..." />
    <LumexProgress Value="70" Color="@ThemeColor.Danger" aria-label="Loading..." />
    <LumexProgress Value="70" Color="@ThemeColor.Info" aria-label="Loading..." />
</div>

Indeterminate

You can use the Indeterminate prop to display an indeterminate progress bar. This is useful when you don't know how long an operation will take.

<div class="w-full flex flex-col gap-4">
    <LumexProgress Indeterminate="@true" Color="@ThemeColor.Primary" Size="@Size.Small" aria-label="Loading..." />
</div>

Striped

Use the Striped parameter to render the progress bar with a striped pattern.

<div class="w-full flex flex-col gap-4">
    <LumexProgress Striped="@true" Value="70" Color="@ThemeColor.Default" Size="@Size.Medium" aria-label="Loading..." />
    <LumexProgress Striped="@true" Value="70" Color="@ThemeColor.Primary" Size="@Size.Medium" aria-label="Loading..." />
    <LumexProgress Striped="@true" Value="70" Color="@ThemeColor.Secondary" Size="@Size.Medium" aria-label="Loading..." />
    <LumexProgress Striped="@true" Value="70" Color="@ThemeColor.Success" Size="@Size.Medium" aria-label="Loading..." />
    <LumexProgress Striped="@true" Value="70" Color="@ThemeColor.Warning" Size="@Size.Medium" aria-label="Loading..." />
    <LumexProgress Striped="@true" Value="70" Color="@ThemeColor.Danger" Size="@Size.Medium" aria-label="Loading..." />
    <LumexProgress Striped="@true" Value="70" Color="@ThemeColor.Info" Size="@Size.Medium" aria-label="Loading..." />
</div>

With Label

Use the Label parameter to display a custom label above the progress bar.

<div class="w-full flex flex-col gap-4">
    <LumexProgress Value="55" Label="Loading..." />
</div>

If you pass the Label prop you don't need to pass aria-label anymore.

With Value

Use the ShowValueLabel parameter to display the progress value/percentage.

@implements IDisposable

<LumexProgress Value="@_value"
               ShowValueLabel="@true"
               Size="@Size.Medium"
               Color="@ThemeColor.Success"
               aria-label="Downloading..." />

@code {
    private double _value = 0;
    private PeriodicTimer? _timer;

    protected override void OnInitialized()
    {
        _timer = new PeriodicTimer( TimeSpan.FromMilliseconds( 500 ) );
        _ = RunAsync( _timer );
    }

    private async Task RunAsync( PeriodicTimer t )
    {
        while( await t.WaitForNextTickAsync() )
        {
            _value = _value >= 100 ? 0 : _value + 10;
            StateHasChanged();
        }
    }

    public void Dispose() => _timer?.Dispose();
}

Custom styles

This component supports named slots, which allow custom styles to be applied to specific parts of the component:

Base: The base container of the progress bar.
LabelWrapper: The wrapper for the label and value label.
Label: The label of the progress bar.
Value: The value label of the progress bar.
Track: The track (background) of the progress bar.
Indicator: The indicator (filled portion) of the progress bar.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Class: The CSS class names to style the progress bar track.
Classes: The CSS class names to style the progress bar slots.

Lose weight65%

<LumexProgress Value="65"
               Label="Lose weight"
               ShowValueLabel="@true"
               Size="@Size.Small"
               Radius="@Radius.Small"
               Classes="@_classes" />

@code {
    private ProgressSlots _classes = new()
    {
        Base = "max-w-md",
        Track = "drop-shadow-md border border-default",
        Indicator = "bg-linear-to-r from-pink-500 to-yellow-500",
        Label = "tracking-wider font-medium text-default-600",
        Value = "text-foreground/60"
    };
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

<LumexProgress />

Progress

On this page