Blazor ProgressBar Overview

The Blazor ProgressBar component tracks the execution of operations and displays what portion of it is completed. For very long tasks, you can also make it indeterminate.

The ProgressBar component is part of Telerik UI for Blazor, a professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Basic ProgressBar

To use the Telerik ProgressBar in your Blazor application:

• add the <TelerikProgressBar> tag.
• set its Value parameter to denote how much is completed.

@*Set the maximum and the current values of the ProgressBar*@

<TelerikProgressBar Max="@MaxValue" Value="@PBValue" />

@code {
    public double MaxValue { get; set; } = 100;
    public double PBValue { get; set; } = 10;
}

Component namespace and reference

<TelerikProgressBar Max="@MaxValue" Value="@PBValue" @ref="MyProgressBar" />

@code {
    Telerik.Blazor.Components.TelerikProgressBar MyProgressBar { get; set; }

    public double MaxValue { get; set; } = 50;
    public double PBValue { get; set; } = 10;
}

Features

The ProgressBar provides the following features:

• Class - the CSS class that will be rendered on the main wrapping element. You can use it to cascade styles more easily.
• Max - double, defaults to 100 - the maximum value of the ProgressBar. It must be greater than 0.
• Value - double - the value of the ProgressBar. This value indicates the progress of the tracked process. It is a fraction of the Max.
• Orientation - you can control the orientation of the ProgressBar, through the ProgressBarOrientation enum, with members:
  • Horizontal - this is the default value
  • Vertical
• Indeterminate - bool, defaults to false - see the Indeterminate article for more information.
• Label - see the Label article for more information. Shows the Value with a % sign by default

Examples

Responsive ProgressBar

The ProgressBar will resize with the parent element dimensions when you set its width to 100%

<div style="width: 50%; border: 1px solid red;">

    <style>
        .width-100 {
            width: 100%;
        }
    </style>

    <TelerikProgressBar Class="width-100" Value="44" />
</div>

Use a Timer to simulate the completion of a task

@using System.Timers
@implements IDisposable

<TelerikButton ThemeColor="primary" OnClick="@StartProgress">Start</TelerikButton>

<br />

<TelerikProgressBar Max="@MaxValue" Value="@PBValue" Indeterminate="@isIndeterminate">
</TelerikProgressBar>

@code {
    public double MaxValue { get; set; } = 100;
    public double PBValue { get; set; } = 10;
    public bool isIndeterminate { get; set; } = false;

    public Timer Timer { get; set; } = new Timer();

    public void Dispose()
    {
        StopProgress();
        Timer?.Close();
    }

    public void StartProgress()
    {
        if (Timer?.Enabled == false)
        {
            Timer.Interval = 200;
            Timer.Elapsed -= OnTimerElapsedEvent;
            Timer.Elapsed += OnTimerElapsedEvent;
            Timer.AutoReset = true;
            Timer.Start();
        }
    }

    public void OnTimerElapsedEvent(Object source, ElapsedEventArgs e)
    {
        if (PBValue < MaxValue)
        {
            UpdateProgress();
        }
        else
        {
            StopProgress();
        }
    }

    public void UpdateProgress()
    {
        PBValue += 5;

        InvokeAsync(StateHasChanged);
    }

    public void StopProgress()
    {
        Timer?.Stop();
        InvokeAsync(StateHasChanged);
    }
}

See Also

• Live Demo: ProgressBar
• Label
• Indeterminate state
• API Reference