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.
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 to100
- the maximum value of the ProgressBar. It must be greater than0
. -
Value
-double
- the value of the ProgressBar. This value indicates the progress of the tracked process. It is a fraction of theMax
. -
Orientation
- you can control the orientation of the ProgressBar, through theProgressBarOrientation
enum, with members:-
Horizontal
- this is the default value Vertical
-
-
Indeterminate
-bool
, defaults tofalse
- see the Indeterminate article for more information. -
Label
- see the Label article for more information. Shows theValue
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);
}
}