# 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](https://demos.telerik.com/aspnet-core/progressbar/index)

* [Demo page for the ProgressBar TagHelper](https://demos.telerik.com/aspnet-core/progressbar/tag-helper)

## Initializing the ProgressBar

The following example demonstrates how to define the ProgressBar.

```Razor HtmlHelper
    @(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 TagHelper
<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 HtmlHelper
    @(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 TagHelper
    <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](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/interactivity/progressbar/getting-started)

* [Basic Usage of the ProgressBar HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/progressbar/index)

* [Basic Usage of the ProgressBar TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/progressbar/tag-helper)

## See Also

* [Using the API of the ProgressBar for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/progressbar/api)
* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)