Progress
Indicates the progress of a task.
<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>