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

Customizing Progressbar

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-progressbar-inline-sizeNullnullnull
Description
Inline size of the progressbar. Width when horizontal, height when vertical.
$kendo-progressbar-block-sizeNullnullnull
Description
Block size of the progressbar. Height when horizontal, width when vertical.
$kendo-progressbar-border-widthNullnullnull
Description
Border width of the progressbar.
$kendo-progressbar-border-radiusNullnullnull
Description
Border radius of the progressbar.
$kendo-progressbar-font-familyNullnullnull
Description
Font family of the progressbar.
$kendo-progressbar-font-sizeNullnullnull
Description
Font size of the progressbar.
$kendo-progressbar-line-heightNullnullnull
Description
Line height of the progressbar.
$kendo-progressbar-animation-timingList1s linear infinite1s linear infinite
Description
Animation timing of the progressbar.
$kendo-progressbar-status-padding-xNullnullnull
Description
Inline padding of the progressbar status.
$kendo-progressbar-status-padding-yNullnullnull
Description
Block padding of the progressbar status.
$kendo-progressbar-bgColork-try-shade( $kendo-component-bg, 1 )#ebebeb
Description
Background color of the progressbar.
$kendo-progressbar-textColor$kendo-component-text#494949
Description
Text color of the progressbar.
$kendo-progressbar-borderColor$kendo-component-border#ededed
Description
Border color of the progressbar.
$kendo-progressbar-gradientNullnullnull
Description
Background gradient of the progressbar.
$kendo-progressbar-value-bgColor$kendo-color-primary#622331
Description
Progress background color of the progressbar.
$kendo-progressbar-value-textColork-contrast-legacy( $kendo-progressbar-value-bg )white
Description
Progress text color of the progressbar.
$kendo-progressbar-value-borderColork-try-shade( $kendo-progressbar-value-bg )#5a202d
Description
Progress border color of the progressbar.
$kendo-progressbar-value-gradientNullnullnull
Description
Progress background gradient of the progressbar.
$kendo-progressbar-indeterminate-bgColor$kendo-progressbar-bg#ebebeb
Description
Background color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-textColor$kendo-progressbar-text#494949
Description
Text color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-borderColor$kendo-progressbar-border#ededed
Description
Border color of the indeterminate progressbar.
$kendo-progressbar-indeterminate-gradientNullnullnull
Description
Background gradient of the indeterminate progressbar.
$kendo-progressbar-chunk-borderColor$kendo-body-bg#ffffff
Description
Border color of the chunk progressbar.
$kendo-circular-progressbar-arc-strokeColor$kendo-color-primary#622331
Description
Arc stroke color of the circular progressbar.
$kendo-circular-progressbar-scale-strokeColor$kendo-progressbar-bg#ebebeb
Description
Scale stroke background color of the circular progressbar.
$kendo-progressbar-themeMap( DEFAULT: ( bg: k-get-theme-color( neutral, 100 ), text: k-get-theme-color( neutral, 700 ), border: k-get-theme-color( neutral, 200 ), value-bg: k-get-theme-color( marsala, 500 ), value-text: k-get-theme-color( marsala, 0 ), value-border: k-get-theme-color( marsala, 500 ) ) )(DEFAULT: (bg: #ededed, text: #494949, border: #d6d6d6, value-bg: #622331, value-text: #ffffff, value-border: #622331))
Description
Theme colors map of the progressbar.

In this article

Not finding the help you need?