# Appearance

The ProgressBar enables you to [set its height and width](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/progressbar/appearance#setting-the-dimensions) and to implement [custom styling for its status indicator and label](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/progressbar/appearance#customizing-the-label-and-status-indicator).

* [Configurator demo](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/progressbar/appearance#configurator-demo)
* [Setting the Dimensions](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/progressbar/appearance#setting-the-dimensions)
* [Customizing the Label and Status Indicator](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/progressbar/appearance#customizing-the-label-and-status-indicator)

## Configurator demo

The following example demonstrates configuring the different aspects of the ProgressBar appearance through a configurator.

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

## Setting the Dimensions

To set the styling of the ProgressBar wrapper element, use the respective CSS properties.

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

## Customizing the Label and Status Indicator

You can customize the label and the bar that indicates the task progress by setting custom styling or custom classes to the inner elements that are responsible for their rendering. To define the custom layout, use the [`progressStyle`](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/api/progressbarprops#progressstyle) and [`progressClassName`](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/api/progressbarprops#progressclassname) options for the completed part and [`emptyStyle`](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/api/progressbarprops#emptystyle) and [`emptyClassName`](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/api/progressbarprops#emptyclassname) options for the empty part.

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

## Suggested Links

* [API Reference of the ProgressBarProps](https://www.telerik.com/kendo-vue-ui-develop/components/progressbars/api/progressbarprops)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-vue-ui-develop/components/styling/theme-builder)