New to Kendo UI for Vue? Start a free 30-day trial
Appearance
Updated on Aug 18, 2026
The ProgressBar enables you to set its height and width and to implement custom styling for its status indicator and label.
Configurator demo
The following example demonstrates configuring the different aspects of the ProgressBar appearance through a configurator.
Loading ...
Setting the Dimensions
To set the styling of the ProgressBar wrapper element, use the respective CSS properties.
Loading ...
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 and progressClassName options for the completed part and emptyStyle and emptyClassName options for the empty part.
Loading ...