Label for the ProgressBar

The label for the ProgressBar is a text representation of the completion of the task. By default the value of completion is shown as percent %. This article explains how to customize the label for the <TelerikProgressBar>.

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">
        <Template>
            <div>
                The value of the ProgressBar is: <span style="font-weight:bold">@(context.Value)</span>
            </div>
        </Template>
    </ProgressBarLabel>
</TelerikProgressBar>

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