ASP.NET Core ProgressBar Overview

Telerik UI for ASP.NET Core Ninja image

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

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.

Initializing the ProgressBar

The following example demonstrates how to define the ProgressBar.

    @(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>
<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.

    @(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);
        })
    )
    <kendo-progressbar name="progressBar" 
        show-status="true" 
        orientation="ProgressBarOrientation.Vertical" 
        type="ProgressBarType.Chunk" 
        animation-duration="600" 
        on-change="onChange" 
        on-complete="onComplete"/>

Next Steps

See Also

In this article