P11 Blazor UI Library – Bootstrap 5.3 Components

P11ProgressBarNative Component

The P11ProgressBarNative component wraps the native HTML <progress> element, enhanced with Bootstrap's .progress class for modern styling. It provides a simple, accessible way to display the completion progress of a task.

Note: The appearance of the progress bar inside the HTML <progress> element can vary significantly across different browsers and operating systems, even with Bootstrap styling. It's recommended to test cross-browser compatibility.

P11ProgressBarNative Component Examples

These examples demonstrate various configurations and functionalities of the P11ProgressBarNative component, showcasing its flexibility for different progress display scenarios.

1. Simple Progress Bar (Standard)

A basic progress bar showing 50% completion.

Modern Pill (Thick & Rounded)

Perfect for prominent download indicators.

Stealth Loader (Minimalist)

Use this at the top of a page or card for subtle loading.

Alert Style (High Contrast)

Great for critical system resources or limits.

Interactive Demo (Smooth Animation)

Current Value: 45 % / 45 % -> (red if >35)

Watch how the 'IsAnimated' flag makes the bar slide smoothly.

Implementation

<div class="mb-4">
    <p>A basic progress bar showing 50% completion.</p>
    <P11ProgressBarNative Value="50" Max="100" />
</div>

<div class="mb-4">
    <label>Modern Pill (Thick & Rounded)</label>
    <P11ProgressBarNative Value="65"
                          Max="100"
                          Height="20px"
                          BorderRadius="10px"
                          ColorVariant="LabelVariant.Primary"
                          TrackColor="#f0f0f0" />

    <div class="mt-2" />

    <P11ProgressBarNative Value="75"
                          ColorCustom="#8a2be2"
                          Height="15px"
                          BorderRadius="20px" />

    <small class="text-muted">Perfect for prominent download indicators.</small>
</div>

<div class="mb-4">
    <label>Stealth Loader (Minimalist)</label>
    <P11ProgressBarNative Value="40"
                          Max="100"
                          Height="3px"
                          BorderRadius="0px"
                          ColorVariant="LabelVariant.Info"
                          TrackColor="transparent" />
    <small class="text-muted">Use this at the top of a page or card for subtle loading.</small>
</div>

<div class="mb-4">
    <label>Alert Style (High Contrast)</label>
    <P11ProgressBarNative Value="85"
                          Max="100"
                          Height="12px"
                          BorderRadius="2px"
                          ColorVariant="LabelVariant.Danger"
                          TrackColor="#343a40" />
    <small class="text-muted">Great for critical system resources or limits.</small>
</div>

<div class="mb-4 p-3 border rounded bg-light">
    <label>Interactive Demo (Smooth Animation)</label>
    <P11ProgressBarNative Value="@_dynamicValue"
                          Max="100"
                          Height="15px"
                          BorderRadius="15px"
                          ColorVariant="LabelVariant.Success"
                          IsAnimated="true" />

    <div class="mt-2" />
    <P11ProgressBarNative Value="@_currentValue"
                          ColorCustom="@(_currentValue > 35.0 ? "#ff0000" : "#00ff00")"
                          IsAnimated="true" />
    <div class="mt-2">
        <button class="btn btn-sm btn-outline-secondary" @onclick="Randomize">Randomize Value</button>
        <span class="ms-3">Current Value: @_dynamicValue % / @_currentValue % -> @(_currentValue > 35.0 ? "(red if >35)" : "(green if <35)")</span>
    </div>
    <small class="text-muted">Watch how the 'IsAnimated' flag makes the bar slide smoothly.</small>
</div>

private double _dynamicValue = 45;
private double _currentValue = 45;

private void Randomize()
{
    _dynamicValue = new Random().Next(0, 101);
    _currentValue = new Random().Next(0, 101);
    StateHasChanged();
}

2. Progress Bar with Custom Max Value

A progress bar demonstrating a custom maximum value (e.g., 250 out of 500).

Implementation

<h4 class="mb-3">2. Progress Bar with Custom Max Value</h4>
<p>A progress bar demonstrating a custom maximum value (e.g., 250 out of 500).</p>
<P11ProgressBarNative Value="250" Max="500" />

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

3. Progress Bar with Custom CSS Class for Styling

A progress bar with a custom CSS class applied for unique styling (e.g., a custom green color).

A progress bar in dark mode with a light border to make it stand out.

A slim progress bar that is half the height of the standard version.

A progress bar that expands from the center, useful as a visual indicator for ongoing processes.

Implementation

<h4 class="mb-3">3. Progress Bar with Custom CSS Class for Styling</h4>
<p>A progress bar with a custom CSS class applied for unique styling (e.g., a custom green color).</p>
<P11ProgressBarNative Value="75" Max="100" class="my-progress-class" ColorVariant="LabelVariant.Success" />

<style>
    .my-progress-class {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        height: 1rem;
        border: none;
        border-radius: 0.25rem;
        background-color: var(--bs-gray-200);
    }
</style>

<br />
<p>
    A progress bar in dark mode with a light border to make it stand out.
</p>
<div class="bg-dark p-3 rounded">
    <P11ProgressBarNative Value="50" Max="100" class="progress-dark" ColorVariant="LabelVariant.Info" />
</div>

<style>
    .progress-dark {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        height: 1rem;
        border: 1px solid var(--bs-gray-600);
        border-radius: 0.25rem;
        background-color: var(--bs-gray-900);
    }
</style>

<br />
<p>
    A slim progress bar that is half the height of the standard version.
</p>
<P11ProgressBarNative Value="30" Max="100" class="progress-slim" ColorVariant="LabelVariant.Warning" />

<style>
    .progress-slim {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        height: 0.5rem;
        border: none;
        border-radius: 0;
        background-color: var(--bs-gray-400);
    }
</style>

<br />
<p>
    A progress bar that expands from the center, useful as a visual indicator for ongoing processes.
</p>

<P11ProgressBarNative Value="100" Max="100" class="progress-pulsing" ColorVariant="LabelVariant.Success" />

<style>
    .progress-pulsing {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        height: 1rem;
        border: none;
        border-radius: 0.25rem;
        background-color: transparent;
        transform-origin: center;
        animation: pulse 2s ease-in-out infinite;
    }

    @@keyframes pulse {
        0% {
            transform: scaleX(0.1);
        }

        50% {
            transform: scaleX(1);
        }

        100% {
            transform: scaleX(0.1);
        }
    }
</style>

// 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>
<P11ProgressBarNative Value="@dynamicProgress" Max="100" />
<p class="mt-2">Current Progress: @dynamicProgress%</p>

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

5. Multiple Progress Bars in a Loop (Dynamic)

Demonstrates multiple progress bars, each with its own dynamic progress, simulating parallel tasks.

Item 1: 10%

Item 2: 45%

Item 3: 90%

Implementation

<h4 class="mb-3">5. Multiple Progress Bars in a Loop (Dynamic)</h4>
<p>Demonstrates multiple progress bars, each with its own dynamic progress, simulating parallel tasks.</p>
@foreach (var p in ProgressItems)
{
    <p>Item @p.Id: @p.CurrentProgress%</p>
    <P11ProgressBarNative Value="@p.CurrentProgress" Max="100" />
    <br />
}

@* You may need the using *@
@* @using System.Timers *@
@code {
    // Example for dynamic progress bars (Example 5)
    private List<ProgressItem> ProgressItems { get; set; } = new()
    {
        new ProgressItem { Id = 1, CurrentProgress = 10, Direction = 1 },
        new ProgressItem { Id = 2, CurrentProgress = 45, Direction = 1 },
        new ProgressItem { Id = 3, CurrentProgress = 90, Direction = 1 }
    };

    private Timer? timer2; // Timer for example 5

    public class ProgressItem
    {
        public int Id { get; set; }
        public double CurrentProgress { get; set; }
        public int Direction { get; set; } = 1; // 1 for increasing, -1 for decreasing
    }

    protected override void OnInitialized()
    {
        // Initialize the dynamic progress bars for example 5
        timer2 = new Timer(200); // Update every 200ms
        timer2.Elapsed += async (sender, e) =>
        {
            foreach (var item in ProgressItems)
            {
                item.CurrentProgress += 1;
                if (item.CurrentProgress > 100)
                {
                    item.CurrentProgress = 0; // Reset and loop
                }
            }
            await InvokeAsync(StateHasChanged); // Update UI on the UI thread
        };
        timer2.Start();
    }

    public void Dispose()
    {
        timer2?.Dispose(); // Dispose second timer
    }
}

Component API

Parameter	Type	Default	Description
`Value`	`double`	-	Current value of the progress bar. Relative to `Max`.
`Max`	`double`	`100.0`	Maximum value of the progress bar.
`ColorVariant`	`LabelVariant?`	`null`	Standard Bootstrap color variant (e.g., Primary, Success).
`ColorCustom`	`string?`	`null`	Custom CSS color (Hex, RGB). Overrides ColorVariant if set.
`Height`	`string`	`"8px"`	Thickness of the progress bar.
`BorderRadius`	`string`	`"4px"`	Corner rounding of the track and progress fill.
`TrackColor`	`string`	`"#e9ecef"`	Background color of the empty part of the bar.
`IsAnimated`	`bool`	`true`	Enables smooth CSS transitions when the value changes.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Attributes applied to the underlying HTML element.