ASP.NET Core ProgressBar Overview

The Telerik UI ProgressBar TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ProgressBar widget.

The ProgressBar delivers rich functionality for displaying and tracking the progress of a task. It supports multiple types, horizontal and vertical orientation, reversed direction, minimum and maximum values, and animation duration.

• Demo page for the ProgressBar HtmlHelper

• Demo page for the ProgressBar TagHelper

Initializing the ProgressBar

The following example demonstrates how to define the ProgressBar.

Razor

    @(Html.Kendo().ProgressBar()
        .Name("progressbar")
        .Type(ProgressBarType.Percent)
        .Animation(a => a.Duration(600))
    )

    <script type="text-javascript">
        $(document).ready(function () {
            $("#progressbar").data("kendoProgressBar").value(50);
        });
    </script>

Razor

<kendo-progressbar name="fastAndFurious" type="ProgressBarType.Percent" animation-duration="600" />

    <script type="text-javascript">
        $(document).ready(function () {
            $("#progressbar").data("kendoProgressBar").value(50);
        });
    </script>

Basic Configuration

The following example demonstrates the basic configuration of the ProgressBar.

Razor

    @(Html.Kendo().ProgressBar()
        .Name("progressBar")
        .Type(ProgressBarType.Chunk)
        .ChunkCount(4)
        .Min(0)
        .Max(4)
        .Value(2)
        .ShowStatus(true)
        .Orientation(ProgressBarOrientation.Vertical)
        .Events(e =>
        {
            e.Change("onChange");
            e.Complete("onComplete");
        })
        .Animation(a =>
        {
            a.Duration(500);
        })
    )

Razor

    <kendo-progressbar name="progressBar" 
        show-status="true" 
        orientation="ProgressBarOrientation.Vertical" 
        type="ProgressBarType.Chunk" 
        animation-duration="600" 
        on-change="onChange" 
        on-complete="onComplete"/>

Next Steps

• Getting Started with the ProgressBar

• Basic Usage of the ProgressBar HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the ProgressBar TagHelper for ASP.NET Core (Demo)

See Also

• Using the API of the ProgressBar for ASP.NET Core (Demo)
• Knowledge Base Section