New to Telerik UI for Blazor? Download free 30-day trial

Label for the ProgressBar

The label for the ProgressBar is a text representation of the completion of the task. By default, the value shows as percent % since the default Max value is 100. If you are using a different Max value, then override the default label, otherwise the percent value will appear inaccurate.

This article explains how to customize the ProgressBar label position and content.

To access the customization settings use the <ProgressBarLabel>. It provides a Context which exposes a Value parameter which is representation of the current value of the component.

Customize the label for the ProgressBar. The result from the code snippet below.

customize the labels of the progress bar

<TelerikProgressBar Max="@MaxValue" Value="@PBValue">
    <ProgressBarLabel Visible="true" Position="@ProgressBarLabelPosition.Center">
                The value of the ProgressBar is: <span style="font-weight:bold">@(context.Value)</span>

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



The Visible parameter takes a boolean value and controls whether the label of the Progress Bar is visible and defaults to true.


To control the position of the label for the Progress Bar, set the ProgressBarLabelPosition enum to one of its members:

  • Start
  • Center
  • End - this is the default value


The Template allows you to control the entire rendering of the label for the Progress Bar.

See Also

In this article