// Für Timer

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


<P11ProgressBarNative Value="50" Max="100" />


// No C# code needed for this static example.

2. Progress Bar with Custom Max Value

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

Implementation


<P11ProgressBarNative Value="250" Max="500" />


// No C# code needed for this static example.

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).

Implementation


<P11ProgressBarNative Value="75" Max="100" class="progress-bar-custom-green" />
<style>
    .progress-bar-custom-green::-webkit-progress-value {
        background-color: #28a745; /* Green for Webkit browsers */
    }
    .progress-bar-custom-green::-moz-progress-bar {
        background-color: #28a745; /* Green for Mozilla browsers */
    }
    .progress-bar-custom-green {
        color: #28a745; /* Fallback for other browsers and general styling */
    }
</style>


// No C# code needed for this static example.

4. Dynamic Progress Bar (Looping)

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

Current Progress: 0%

Implementation


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


private double dynamicProgress = 0;
private Timer? timer1; // Renamed for clarity

protected override void OnInitialized()
{
    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();
}

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

@foreach (var p in ProgressItems)
{
    <p>Item @p.Id: @p.CurrentProgress%</p>
    <P11ProgressBarNative Value="@p.CurrentProgress" Max="100" />
    <br />
}


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; // New timer for multiple progress bars

protected override void OnInitialized()
{
    // ... (existing timer1 initialization 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();

    // 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()
{
    timer1?.Dispose(); // Dispose first timer
    timer2?.Dispose(); // Dispose second timer
}

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
}

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><progress></code> element.