# Vue ProgressBars Overview

The Kendo UI for Vue ProgressBars package contains the ProgressBar components.

The ProgressBars components are part of the Kendo UI for Vue library and are distributed through NPM under the [kendo-vue-progressbars package](https://www.npmjs.com/package/@progress/kendo-vue-progressbars).

<CtaPanelOverview></CtaPanelOverview>

<Row>
  <Column count={12}>
    <Component href="/progressbars/progressbar">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path class="cls-1" d="M24,3H20V5h2ZM4,10H0v4H4ZM18,2H0V6H18ZM0,22H12V18H0Zm14-1h8l2-2H14ZM6,13H22l2-2H6Z"/>
        </svg>
        <ComponentTitle>ProgressBar</ComponentTitle>
        <ComponentDescription>A component for tracking and displaying the progress of a task.</ComponentDescription>
    </Component>
  </Column>
  <Column count={12}>
    <Component href="/progressbars/chunkprogressbar">
        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path class="cls-1" d="M0,14H6V10H0Zm0,8H6V18H0ZM14,2H8V6h6ZM24,3H16V5h6ZM0,6H6V2H0Zm8,7H22l2-2H8Zm8,8h6l2-2H16ZM8,22h6V18H8Z"/>
        </svg>
        <ComponentTitle>ChunkProgressBar</ComponentTitle>
        <ComponentDescription>A component displaying the progress of a task in separate chunks.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Basic Usage

The following demo shows live server metrics and deployment progress using the ProgressBar components.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/progressbars/overview/source.txt)

## Key Features

The Kendo UI for Vue ProgressBars provide a wide and always growing range of built-in features that isn't limited by the list in this section. This developer-friendly feature set allows you to create beautiful and functional applications faster. The Kendo UI for Vue team constantly invests efforts to improve the performance, add more value to the existing ProgressBars library, and develop new features.

### Orientation

You can customize the orientation of the ProgressBars components, choosing between a `horizontal` and a `vertical` layout. [Read more about the ProgressBar orientation...](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/progressbar/orientation)

### Direction

You can reverse the direction of the ProgressBars by setting their `reverse` option to `true`. [Read more about the ProgressBar direction...](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/progressbar/direction)

### Appearance

The ProgressBars enable you to set their `height` and `width`, and to implement custom styling for their status indicator and label. [Read more about the styling options of the ProgressBar...](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/progressbar/appearance)

### Disabled ProgressBars

You can choose to render the ProgressBars in their `disabled` state so that, if need be present, users will not be able to interact with them. [Read more about the disabled ProgressBar...](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/progressbar/disabled)

### Globalization

The Kendo UI for Vue ProgressBars come with globalization features that allow you to create applications that can be used all over the world. This is achieved by combining the translation of component messages with adaptation to specific cultures. [Read more about the globalization of the ProgressBars library...](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/globalization)

## Support Options

For any questions about the use of Kendo UI for Vue ProgressBars, or any other [Kendo UI for Vue components](https://www.telerik.com/kendo-vue-ui/components/), there are several support options available:

* Kendo UI for Vue license holders and everyone with an active trial license can benefit from the outstanding Kendo UI for Vue customer support delivered by the developers who built the library. To submit a support ticket, use the [Telerik support system](https://www.telerik.com/account/support-tickets).
* The [Kendo UI for Vue forums](https://www.telerik.com/forums/kendo-ui-vue) are part of the free support you can get from the community and from the Kendo UI for Vue team on all kinds of general issues.
* [Kendo UI for Vue Feedback Portal](https://feedback.telerik.com/kendo-vue-ui) and [Kendo UI for Vue Roadmap](https://www.telerik.com/kendo-vue-ui/roadmap/) provides information on the features in discussion and also those planned for release.
* Need something unique that is tailor-made for your project? Progress offers its [Progress Services](https://www.progress.com/services) group that can work with you to create any customized solution that you might need.

## Support and Learning Resources

* [ProgressBar Homepage](https://www.telerik.com/kendo-vue-ui/progressbar)
* [ChunkProgressBar Homepage](https://www.telerik.com/kendo-vue-ui/chunkprogressbar)
* [Getting Started with the Kendo UI Vue ProgressBars](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/get-started)
* [API Reference of the ProgressBar](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/api/progressbarprops)
* [API Reference of the ChunkProgressBar](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/api/chunkprogressbarprops)
* [Getting Started with Kendo UI for Vue - JavaScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api)
* [Getting Started with Kendo UI for Vue - TypeScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-composition-api)
* [Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-options-api)
* [Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-options-api)
* [Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/get-started-nuxt-3)
* [Virtual Classroom (Training Course for Registered Users)](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
* [ProgressBar Forum](https://www.telerik.com/forums/kendo-ui-vue?searchText=progressbar)
* [ChunkProgressBar Forum](https://www.telerik.com/forums/kendo-ui-vue?searchText=chunkprogressbar)
* [Knowledge Base](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/)
* [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension)

## Additional Resources

* [Vue Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-vue)
* [Kendo UI for Vue Roadmap](https://www.telerik.com/support/whats-new/kendo-vue-ui/roadmap)