Progress

The Progress component is a dynamic UI element that visually represents the completion status of a task or operation. It enhances user experience by providing immediate feedback on ongoing processes, such as file uploads, data processing, or loading sequences.

Default Progress Bar

A basic progress bar displaying the completion percentage without any labels.

Source

<Progress CurrentValue="20" MinValue="0" MaxValue="100" Variant="StatusColor.Primary" AriaLabel="Default progress bar" />

Progress Bar with Label Inside

A progress bar that includes a label centered within the bar to display the current progress percentage.

Source

<Progress 
    CurrentValue="1" 
    MinValue="0" 
    MaxValue="100"
    Label="Completed {percent}%"
    LabelPosition="ProgressLabelPosition.Inside" 
    Variant="StatusColor.Success" 
    AriaLabel="Progress bar with label inside" 
/>

<Progress 
    CurrentValue="45" 
    MinValue="0" 
    MaxValue="100"
    Label="Completed {percent}%"
    LabelPosition="ProgressLabelPosition.Inside" 
    Variant="StatusColor.Success" 
    AriaLabel="Progress bar with label inside" 
/>

Progress Bar with Label Outside

A progress bar that displays a label outside the bar, providing a clear indication of the current progress percentage alongside the bar.

Source

<Progress 
    CurrentValue="70" 
    MinValue="0" 
    MaxValue="100" 
    Label="{percent}% Compressed" 
    LabelPosition="ProgressLabelPosition.Outside" 
    Variant="StatusColor.Warning" 
    AriaLabel="Progress bar with label outside" 
/>

Progress Bar Color Variants

Progress bars can be styled with different color variants to represent various statuses or contexts, such as primary, secondary, success, info, warning, and danger.

Source

<!-- Primary Progress Bar -->
<Progress 
    CurrentValue="40" 
    MinValue="0" 
    MaxValue="100" 
    Variant="StatusColor.Primary" 
    AriaLabel="Primary progress bar" 
/>

<!-- Secondary Progress Bar -->
<Progress 
    CurrentValue="60" 
    MinValue="0" 
    MaxValue="100" 
    Variant="StatusColor.Secondary" 
    AriaLabel="Secondary progress bar" 
/>

<!-- Success Progress Bar -->
<Progress 
    CurrentValue="80" 
    MinValue="0" 
    MaxValue="100" 
    Variant="StatusColor.Success" 
    AriaLabel="Success progress bar" 
/>

<!-- Info Progress Bar -->
<Progress 
    CurrentValue="50" 
    MinValue="0" 
    MaxValue="100" 
    Variant="StatusColor.Info" 
    AriaLabel="Info progress bar" 
/>

<!-- Warning Progress Bar -->
<Progress 
    CurrentValue="30" 
    MinValue="0" 
    MaxValue="100" 
    Variant="StatusColor.Warning" 
    AriaLabel="Warning progress bar" 
/>

<!-- Danger Progress Bar -->
<Progress 
    CurrentValue="90" 
    MinValue="0" 
    MaxValue="100" 
    Variant="StatusColor.Danger" 
    AriaLabel="Danger progress bar" 
/>