Overview

The Progress component displays the completion state of an operation as a horizontal bar. It accepts a Value (0–100), a customizable Height, and merges additional classes via Shell.Cn().

Installation

shellui add progress

Usage

Basic Progress

<Progress Value="50" />

With Label

Use the Label component alongside Progress for clear descriptions:

<div class="space-y-4">
    <div>
        <Label>25% Complete</Label>
        <Progress Value="25" />
    </div>
    <div>
        <Label>50% Complete</Label>
        <Progress Value="50" />
    </div>
    <div>
        <Label>75% Complete</Label>
        <Progress Value="75" Height="0.75rem" />
    </div>
</div>

Custom Height

Use the Height parameter to adjust the bar thickness:

<Progress Value="60" Height="0.75rem" />
<Progress Value="80" Height="1rem" />

Dynamic Progress

<div>
    <Label>Processing... @progress%</Label>
    <Progress Value="@progress" />
</div>

@code {
    private int progress = 0;

    protected override async Task OnInitializedAsync()
    {
        for (int i = 0; i <= 100; i += 10)
        {
            progress = i;
            StateHasChanged();
            await Task.Delay(500);
        }
    }
}

Multiple Progress Bars

<div class="space-y-4">
    <div>
        <Label>Storage — @storage%</Label>
        <Progress Value="@storage" />
    </div>
    <div>
        <Label>Bandwidth — @bandwidth%</Label>
        <Progress Value="@bandwidth" />
    </div>
    <div>
        <Label>CPU — @cpu%</Label>
        <Progress Value="@cpu" Height="0.75rem" />
    </div>
</div>

@code {
    private int storage = 65;
    private int bandwidth = 30;
    private int cpu = 82;
}

Custom Styling

<Progress Value="80" Class="bg-muted" />

API Reference

Parameter	Type	Default	Description
`Value`	`int`	`0`	Progress value from 0 to 100
`Height`	`string`	`"0.5rem"`	CSS height of the progress bar
`Class`	`string?`	`null`	Additional CSS classes merged via `Shell.Cn()`

Accessibility

Rendered with role="progressbar", aria-valuenow, aria-valuemin, and aria-valuemax.
Screen readers announce the current progress percentage.
Visual fill width reflects the Value for sighted users.

Progress

On this page