DuneUI

<div class="flex w-full flex-col gap-4">
    <dui-progress value="0"/>
    <dui-progress value="25"/>
    <dui-progress value="50"/>
    <dui-progress value="75"/>
    <dui-progress value="100"/>
</div>

Usage

<dui-progress value="...">
    <dui-progress-label>...</dui-progress-label>
    <dui-progress-value/>
</dui-progress>

Examples

Minimum and Maximum Values

Specify custom minimum and maximum values. The default values are 0 and 100 respectively.

<dui-progress minimum="50" maximum="120" value="100"/>

With Label

<dui-progress value="56">
    <dui-progress-label>Upload progress</dui-progress-label>
    <dui-progress-value/>
</dui-progress>

File Upload List

<dui-item-group>
    @foreach (var file in Model)
    {
        <dui-item size="ItemSize.ExtraSmall" class="px-0">
            <dui-item-media variant="ItemMediaVariant.Icon">
                <dui-icon name="file"/>
            </dui-item-media>
            <dui-item-content class="inline-block truncate">
                <dui-item-title class="inline">@file.Name</dui-item-title>
            </dui-item-content>
            <dui-item-content>
                <dui-progress value="@file.Progress" class="w-40"/>
            </dui-item-content>
            <dui-item-actions class="w-16 justify-end">
            <span class="text-muted-foreground text-sm">
                @file.TimeRemaining
            </span>
            </dui-item-actions>
        </dui-item>
    }
</dui-item-group>

The <dui-progress> tag helper renders a <div> element containing the progress track and indicator. In addition to the attributes below, it forwards any global HTML attributes to the rendered element.

Prop

Type

`<dui-progress-label>`

The <dui-progress-label> tag helper renders a <span> element containing the label text. It has no attributes of its own, but forwards any global HTML attributes to the rendered element.

`<dui-progress-value>`

The <dui-progress-value> tag helper renders a <span> element. When it has no content, it displays the percentage completed, calculated from the parent <dui-progress> values. It has no attributes of its own, but forwards any global HTML attributes to the rendered element.

Progress