Progress
Indicates the progress of a task
Theme
<div class="flex w-full flex-col gap-4">
<sa-progress value="0"/>
<sa-progress value="25"/>
<sa-progress value="50"/>
<sa-progress value="75"/>
<sa-progress value="100"/>
</div>
Usage
Set value and optionally add a label and an <sa-progress-value> readout.
<sa-progress value="...">
<sa-progress-label>...</sa-progress-label>
<sa-progress-value/>
</sa-progress>Examples
Minimum and maximum values
Specify custom minimum and maximum values. The default values are 0 and 100 respectively.
Theme
<sa-progress minimum="50" maximum="120" value="100"/>With label
Add an <sa-progress-label> and an <sa-progress-value>, which renders the current value as a percentage.
Theme
<sa-progress value="56">
<sa-progress-label>Upload progress</sa-progress-label>
<sa-progress-value/>
</sa-progress>File upload list
Progress bars compose with Item to build an upload list.
Theme
<sa-item-group>
@foreach (var file in Model)
{
<sa-item size="ItemSize.ExtraSmall" class="px-0">
<sa-item-media variant="ItemMediaVariant.Icon">
<sa-icon name="file"/>
</sa-item-media>
<sa-item-content class="inline-block truncate">
<sa-item-title class="inline">@file.Name</sa-item-title>
</sa-item-content>
<sa-item-content>
<sa-progress value="@file.Progress" class="w-40"/>
</sa-item-content>
<sa-item-actions class="w-16 justify-end">
<span class="text-muted-foreground text-sm">
@file.TimeRemaining
</span>
</sa-item-actions>
</sa-item>
}
</sa-item-group>API Reference
<sa-progress>
Renders a <div> element containing the progress track and indicator.
Prop
Type
<sa-progress-label>
Renders a <span> element containing the label text.
<sa-progress-value>
Renders a <span> element. When it has no content, it displays the percentage completed, calculated from the parent <sa-progress> values.