P11 Blazor UI Library – Bootstrap 5.3 Components

P11ProgressBar Component

The P11ProgressBar component leverages Bootstrap 5 classes to provide a consistently styled and feature-rich progress bar. It supports different colors, striped patterns, and animations out of the box.

P11ProgressBar Component Examples

These examples demonstrate various functionalities and styling options of the P11ProgressBar component, showcasing its flexibility.

1. Simple Progress Bar

A basic progress bar showing 25% completion with the default primary color.

Implementation

<h4 class="mb-3">1. Simple Progress Bar</h4>
<p>A basic progress bar showing 25% completion with the default primary color.</p>
<P11ProgressBar Value="25" Max="100" />

// No specific C# code required for this example (component controlled directly in Razor markup).

2. Colored Progress Bars with Labels

Progress bars with various Bootstrap color variants and a label showing the percentage.

10%

35%

60%

85%

Implementation

<h4 class="mb-3">2. Colored Progress Bars with Labels</h4>
<p>Progress bars with various Bootstrap color variants and a label showing the percentage.</p>
<P11ProgressBar Value="10" Max="100" Color="ProgressBarColor.Success" ShowLabel="true" />
<br />
<P11ProgressBar Value="35" Max="100" Color="ProgressBarColor.Info" ShowLabel="true" />
<br />
<P11ProgressBar Value="60" Max="100" Color="ProgressBarColor.Warning" ShowLabel="true" />
<br />
<P11ProgressBar Value="85" Max="100" Color="ProgressBarColor.Danger" ShowLabel="true" />

// No specific C# code required for this example (component controlled directly in Razor markup).

3. Striped and Animated Progress Bar

A progress bar with a striped pattern and an animation, simulating an active loading state.

Implementation

<h4 class="mb-3">3. Striped and Animated Progress Bar</h4>
<p>A progress bar with a striped pattern and an animation, simulating an active loading state.</p>
<P11ProgressBar Value="50" Max="100" Color="ProgressBarColor.Info" IsStriped="true" IsAnimated="true" />

// No specific C# code required for this example (component controlled directly in Razor markup).

4. Dynamic Progress Bar (Looping)

This example demonstrates a progress bar that updates dynamically over time, simulating a loading process.

Current Progress: 0%

Implementation

<h4 class="mb-3">4. Dynamic Progress Bar (Looping)</h4>
<p>This example demonstrates a progress bar that updates dynamically over time, simulating a loading process.</p>
<P11ProgressBar Value="@dynamicProgress" Max="100" IsStriped="true" IsAnimated="true" ShowLabel="true" />
<p class="mt-2">Current Progress: @dynamicProgress%</p>

@* You may need the using *@
@* @using System.Timers *@
@code {
    private double dynamicProgress = 0;
    private System.Timers.Timer? timer;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        // Initialize a single timer for the dynamic progress bar example
        timer = new System.Timers.Timer(100); // Update every 100ms
        timer.Elapsed += async (sender, e) =>
        {
            dynamicProgress += 1;
            if (dynamicProgress > 100)
            {
                dynamicProgress = 0; // Reset and loop
            }
            await InvokeAsync(StateHasChanged); // Update UI on the UI thread
        };
        timer.Start();
    }

    // Dispose the timer to prevent memory leaks
    public void Dispose()
    {
        timer?.Dispose();
    }
}

Component API

Parameter	Type	Default	Description
`Value`	`double`	-	Gets or sets the current value of the progress bar. This should be a number between 0 and `Max`.
`Max`	`double`	`100.0`	Gets or sets the maximum value of the progress bar. The `Value` parameter is relative to this maximum.
`Color`	`ProgressBarColor`	`Primary`	Sets the color of the progress bar using Bootstrap's color palette (e.g., Success, Danger, Info).
`IsStriped`	`bool`	`false`	If set to `true`, applies a striped pattern to the progress bar.
`IsAnimated`	`bool`	`false`	If set to `true`, applies an animation to the striped progress bar.
`ShowLabel`	`bool`	`false`	If set to `true`, displays the current percentage value inside the progress bar.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Captures all un-matched attributes that are passed to the component. These attributes will be applied to the outer <code>div</code> element.