---
title: Overview
position: 1
seo_title: Overview of the ProgressBar Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  ProgressBar component, check out the extensive set of available options
  in its live demo, and master its appearance by setting the orientation,
  direction, and status label as you wish on the fly.
---
## ProgressBar Overview

A ProgressBar is a visual indicator component used to track the progress of a task or process. It provides the user with a clear visual cue that indicates how much of a task has been completed or how far a process has progressed. This component helps you to improve  the user experience by keeping users informed about ongoing tasks and providing a sense of completion or progress. In addition, the ProgressBar component provides various options that allow you to customize its label, orientation, and direction to best suit the needs of your application.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/progressbars/"},{"text":"Blazor","url":"https://demos.telerik.com/blazor-ui/progressbar/overview"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/progressbar/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/progressbars/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/progressbars/"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/progressbar"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/progressbar"}],"demo":"components/progressbar/overview"}'></LiveDemo>

#### States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI ProgressBar can acquire the following states which you can set by using the following classes:

* A ProgressBar in its normal state appears active.
* `k-disabled`&mdash;The disabled state shows that a ProgressBar doesn't provide an indication. To indicate that they are unavailable, ProgressBars in their disabled state are usually faded and slightly out of focus.

### Appearance

ProgressBars provide built-in styling options that grant visually appealing and flexible rendering experience.

#### Anatomy

The anatomy of the ProgressBar summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"ProgressBar container"},{"text":"ProgressBar indicator"},{"text":"Progress status label"}]}'>![Anatomy of the Telerik and Kendo UI ProgressBar](images/components-progressbar-overview-anatomy.png "The elements of the Telerik and Kendo UI ProgressBar component")</BlueprintImage>

#### Orientation

The Telerik and Kendo UI ProgressBar component provides both horizontal and vertical alignment for flexible integration into various user interface layouts:

<BlueprintImage data='{"description":"","labels":[{"text":"Horizontal"},{"text":"Vertical"}]}'>![Two Telerik and Kendo UI ProgressBar components demonstrating the horizontal and vertical orientation respectively](images/components-progressbar-overview-orientation.png "The horizontal and the vertical orientation of the Telerik and Kendo UI ProgressBar")</BlueprintImage>

#### Direction

For flexible integration into different usage scenarios, the ProgressBar component allows you to choose between the forward and reverse directions of the progress indicator.

<BlueprintImage data='{"description":"","labels":[{"text":"Forward"},{"text":"Reverse"}]}'>![Two Telerik and Kendo UI ProgressBar components demonstrating the forward and reverse direction respectively](images/components-progressbar-overview-direction.png "The forward and the reverse direction of the Telerik and Kendo UI ProgressBar")</BlueprintImage>

#### Status Label

The ProgressBar component provides several options for positioning status labels, allowing you to choose whether to place them at the beginning, middle, or end or to omit the labels altogether. This flexibility allows you to customize the ProgressBar to meet your specific design and user experience requirements.

<BlueprintImage data='{"description":"","labels":[{"text":"Label at start"},{"text":"Label in the center"},{"text":"Label at the end"},{"text":"No label"}]}'>![Four Telerik and Kendo UI ProgressBar components demonstrating the possible positioning of the label](images/components-progressbar-overview-status-label.png "The four possible positions of the label in the Telerik and Kendo UI ProgressBar")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular ProgressBar","description":"Find more information about the Kendo UI for Angular ProgressBar in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/progressbars/progressbar/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor ProgressBar","description":"Find more information about the Telerik UI for Blazor ProgressBar in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/progressbar/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery ProgressBar","description":"Find more information about the Kendo UI for jQuery ProgressBar in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/progressbar/overview"}'>![Kendo UI for jQuery logo](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact ProgressBar","description":"Find more information about the KendoReact ProgressBar in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/progressbars/progressbar/"}'>![Kendo UI for React logo](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue ProgressBar","description":"Find more information about the Kendo UI for Vue ProgressBar in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/progressbars/progressbar/"}'>![Kendo UI for Vue logo](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core ProgressBar","description":"Find more information about the Telerik UI for ASP.NET Core ProgressBar component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/interactivity/progressbar/overview"}'>![Telerik UI for ASP.NET Core logo](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC ProgressBar","description":"Find more information about the Telerik UI for ASP.NET MVC ProgressBar component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/interactivity/progressbar/overview"}'>![Telerik UI for ASP.NET MVC logo](/images/mvc-logo.svg)</ExternalResource>

</Wrap>