RzProgress

The RzProgress 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 RzProgress Bar

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

Source

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

RzProgress Bar with Label Inside

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

Source

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

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

RzProgress 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

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

RzProgress Bar Color Variants

RzProgress 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 RzProgress Bar -->
<RzProgress 
    CurrentValue="40" 
    MinValue="0" 
    MaxValue="100" 
    Variant="StatusColor.Primary" 
    AriaLabel="Primary progress bar" 
/>

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

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

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

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

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

RzProgress Component Parameters

Property	Description	Type	Default
`CurrentValue`	`int` – Gets or sets the current value of the progress bar.	`int`	`0`
`MinValue`	`int` – Gets or sets the minimum value of the progress bar.	`int`	`0`
`MaxValue`	`int` – Gets or sets the maximum value of the progress bar.	`int`	`100`
`Label`	`string?` – Gets or sets the label text for the progress bar. Supports `{percent}` placeholder.	`string?`	`null`
`LabelPosition`	`ProgressLabelPosition` – Gets or sets the position of the label (Inside or Outside).	`ProgressLabelPosition`	`ProgressLabelPosition.Outside`
`Variant`	`StatusColor` – Gets or sets the status color variant of the progress bar.	`StatusColor`	`StatusColor.Primary`
`AriaLabel`	`string` – Gets or sets the aria-label for accessibility.	`string`	`"Progress Bar"`