ASP.NET MVC ProgressBar Overview

Telerik UI for ASP.NET MVC Ninja image

The ProgressBar is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI ProgressBar widget. wrapper for the Kendo UI DataSource 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>

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);
        })
    )

Next Steps

See Also

In this article