p11 UI
true-perfect-code
Version: 1.1.69

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.

Implementation

<h4 class="mb-3">1. Simple Progress Bar (Standard)</h4>
<p>A basic progress bar showing 50% completion.</p>
<P11ProgressBarNative Value="50" Max="100" />
// No specific C# code required for this example (component controlled directly in Razor markup).

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 - 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.
AdditionalAttributes Dictionary<string, object>? null Captures all un-matched attributes that are passed to the component. These attributes will be applied to the underlying HTML <code>&lt;progress&gt;</code> element.
An unhandled error has occurred. Reload 🗙