New to Kendo UI for Angular? Start a free 30-day trial

Customizing Progressbar

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-progressbar-heightNumber$progress-height1rem
Description
The height of the ProgressBar.
$kendo-progressbar-horizontal-widthNumber100%100%
Description
The horizontal width of the ProgressBar.
$kendo-progressbar-animation-timingList$progress-bar-animation-timing1s linear infinite
Description
The animation timing of the ProgressBar.
$kendo-progressbar-border-widthNumber0px0px
Description
The width of the border around the ProgressBar.
$kendo-progressbar-font-familyList$kendo-font-familysystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
Description
The font family of the ProgressBar.
$kendo-progressbar-font-sizeNumber$progress-font-size0.75rem
Description
The font size of the ProgressBar.
$kendo-progressbar-line-heightNumber11
Description
The line height of the ProgressBar.
$kendo-progressbar-bgColor$gray-200#e9ecef
Description
The background color of the ProgressBar.
$kendo-progressbar-textColork-contrast-color( $gray-200 )black
Description
The text color of the ProgressBar.
$kendo-progressbar-borderNullnullnull
Description
The border color of the ProgressBar.
$kendo-progressbar-gradientNullnullnull
Description
The background gradient of the ProgressBar.
$kendo-progressbar-value-bgColor$kendo-selected-bg#0d6efd
Description
The progress background color of the ProgressBar.
$kendo-progressbar-value-textColor$kendo-selected-textwhite
Description
The progress text color of the ProgressBar.
$kendo-progressbar-value-borderNullnullnull
Description
The progress border color of the ProgressBar.
$kendo-progressbar-value-gradientNullnullnull
Description
The progress background gradient of the ProgressBar.
$kendo-progressbar-indeterminate-bgColor$kendo-progressbar-bg#e9ecef
Description
The background color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-textColor$kendo-progressbar-textblack
Description
The text color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-borderNull$kendo-progressbar-bordernull
Description
The border color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-gradientNullnullnull
Description
The background gradient of the indeterminate ProgressBar.
$kendo-progressbar-chunk-borderColor$kendo-body-bg#ffffff
Description
The border color of the chunk ProgressBar.
$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#0d6efd
Description
The arc stroke color of the circular ProgressBar.
$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#e9ecef
Description
The scale stroke background color of the circular ProgressBar.

In this article

Not finding the help you need?