# Getting Started with the ProgressBar

This tutorial explains how to set up the Telerik UI for ASP.NET Core ProgressBar and goes through the steps in the configuration of the component.

You will declare a ProgressBar component. Next, you will set a default value and configure how the ProgressBar displays the achieved progress. Then, you will learn to handle the JavaScript events of the ProgressBar and to access a client-side reference of the component.

After completing this guide, you will achieve the following results:

![Sample Telerik UI for ASP.NET Core ProgressBar](https://www.telerik.com/aspnet-core-ui/documentation/assets/4b3989f5d3595a9f88a428d33246a12f/progressbar-getting-started.png)

## Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET Core components:

* To create a new pre-configured project for the Telerik UI for ASP.NET Core components, you can use [a project template](https://www.telerik.com/aspnet-core-ui/documentation/vs-integration/new-project-wizard).

## 1. Prepare the CSHTML File

The first step is to add the required directives at the top of the `.cshtml` document:

* To use the Telerik UI for ASP.NET Core HtmlHelpers:

  ```cshtml
  @using Kendo.Mvc.UI
  ```

* To use the Telerik UI for ASP.NET Core TagHelpers:

  ```cshtml
  @addTagHelper *, Kendo.Mvc
  ```

Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.

## 2. Initialize the ProgressBar

Use the ProgressBar HtmlHelper or TagHelper to configure the component.

* Use the `Name()` configuration method to assign a name to the instance of the helper—this is mandatory as its value is used for the `id` and the `name` attributes of the ProgressBar element.
* Configure the `Type` of the ProgressBar. The available configurations are `Value`, `Percent`, and `Chunk`.
* Set the initial `Value`.

```Razor HtmlHelper
    @using Kendo.Mvc.UI

    <div id="example">
        <label>Shipment Progress </label>
        @(Html.Kendo().ProgressBar()
            .Name("shipment")
            .Type(ProgressBarType.Percent)
            .Value(30)
        )
    </div>
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc

    <div id="example">
        <label>Shipment Progress </label>
        <kendo-progressbar 
            name="shipment"
            enable="true" 
            show-status="true" 
            type="ProgressBarType.Percent" 
            value="30">
        </kendo-progressbar>
    </div>
```

## 3. Handle the ProgressBar Events

The ProgressBar exposes [events](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui.fluent/progressbareventbuilder) that you can handle and trigger specific actions. In this tutorial, you will use the [`Complete Event`](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui.fluent/progressbareventbuilder#completesystemstring) of the ProgressBar.

```Razor HtmlHelper
    @using Kendo.Mvc.UI

    <div id="example">
        <label>Shipment Progress </label>
        @(Html.Kendo().ProgressBar()
            .Name("shipment")
            .Type(ProgressBarType.Percent)
            .Value(30)
            .Events(e=>e.Complete("onComplete"))
        )
    </div>
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc

    <div id="example">
        <label>Shipment Progress </label>
        <kendo-progressbar 
            name="shipment"
            enable="true" 
            show-status="true" 
            type="ProgressBarType.Percent" 
            value="30"
            on-complete="onComplete">
        </kendo-progressbar>
    </div>
```

```JavaScript
    function onComplete(e){
        alert("Your shipment has arrived!")
        // use the e.value property to access the current value of the ProgressBar
    }
```

## (Optional) Reference Existing ProgressBar Instances

Referencing existing component instances allows you to build on top of their configuration. To reference an existing ProgressBar instance, use the [`jQuery.data()`](http://api.jquery.com/jQuery.data/) method. Once a reference is established, use the [ProgressBar client-side API](https://docs.telerik.com/kendo-ui/api/ui/scheduler#methods) to control its behavior.

1. Use the `id` attribute of the component instance to establish a reference.

   ```JS script
   <script>
       var progressbarReference = $("#progressbarExample").data("kendoProgressBar"); // progressbarReference is a reference to the existing instance of the helper.
   </script>
   ```

2. Use the [ProgressBar client-side API](https://docs.telerik.com/kendo-ui/api/ui/progressbar#methods) to control the behavior of the widget. In this example, you will see how to adjust the value of ProgressBar programmatically.

   ```JS script
       <script>
           var progressbar = $("#shipment").data("kendoProgressBar");		
           progressbar.value(35);
       </script>
   ```

## Explore this Tutorial in REPL

You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:

* [Sample code with the ProgressBar HtmlHelper](https://netcorerepl.telerik.com/GnuqbtaD321Y47WE20)
* [Sample code with the ProgressBar TagHelper](https://netcorerepl.telerik.com/wdaAvXEt32Oi9Wvm05)

## Next Steps

* [ProgressBar Events](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/interactivity/progressbar/events)
* [Chunk ProgressBar (Demo)](https://demos.telerik.com/aspnet-core/progressbar/chunk)
* [Vertical ProgressBar (Demo)](https://demos.telerik.com/aspnet-core/progressbar/vertical)

## See Also

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