Customizing Progressbar

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-progressbar-height4px
Description
The height of the ProgressBar.
$kendo-progressbar-horizontal-width100%
Description
The horizontal width of the ProgressBar.
$kendo-progressbar-animation-timing1s linear infinite
Description
The animation timing of the ProgressBar.
$kendo-progressbar-border-width0px
Description
The width of the border around the ProgressBar.
$kendo-progressbar-border-radiusvar( --kendo-border-radius-sm, initial )
Description
The border radius of the ProgressBar.
$kendo-progressbar-font-familyvar( --kendo-font-family, inherit )
Description
The font family of the ProgressBar.
$kendo-progressbar-font-sizevar( --kendo-font-size-sm, inherit )
Description
The font size of the ProgressBar.
$kendo-progressbar-line-heightvar( --kendo-line-height, inherit )
Description
The line height of the ProgressBar.
$kendo-progressbar-padding-x0
Description
The horizontal padding of the ProgressBar.
$kendo-progressbar-padding-y0
Description
The vertical padding of the ProgressBar.
$kendo-progressbar-bgif($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))
Description
The background color of the ProgressBar.
$kendo-progressbar-textvar( --kendo-component-text, initial )
Description
The text color of the ProgressBar.
$kendo-progressbar-border$kendo-progressbar-bg
Description
The border color of the ProgressBar.
$kendo-progressbar-gradientnull
Description
The background gradient of the ProgressBar.
$kendo-progressbar-value-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The progress background color of the ProgressBar.
$kendo-progressbar-value-textvar( --kendo-component-text, initial )
Description
The progress text color of the ProgressBar.
$kendo-progressbar-value-border$kendo-progressbar-value-bg
Description
The progress border color of the ProgressBar.
$kendo-progressbar-value-gradientnull
Description
The progress background gradient of the ProgressBar.
$kendo-progressbar-offset-ymap.get( $kendo-spacing, 2 )
Description
The progress status offset of the ProgressBar.
$kendo-progressbar-vertical-status-offsetcalc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1)
Description
The progress status offset of the vertical ProgressBar.
$kendo-progressbar-disabled-bgif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 ))
Description
The background color of the disabled ProgressBar.
$kendo-progressbar-disabled-textif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))
Description
The text color of the disabled ProgressBar.
$kendo-progressbar-disabled-border$kendo-progressbar-disabled-bg
Description
The border color of the disabled ProgressBar.
$kendo-progressbar-value-disabled-bgif($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-30 ))
Description
The progress background color of the disabled ProgressBar.
$kendo-progressbar-indeterminate-bgif($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))
Description
The background color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-text$kendo-progressbar-text
Description
The text color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-borderif($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))
Description
The border color of the indeterminate ProgressBar.
$kendo-progressbar-indeterminate-gradient-horizontallinear-gradient(270deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%)
Description
The background gradient of the horizontal indeterminate ProgressBar.
$kendo-progressbar-indeterminate-gradient-verticallinear-gradient(180deg, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 15%, if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) 50%, if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) 85%)
Description
The background gradient of the vertical indeterminate ProgressBar.
$kendo-progressbar-indeterminate-animation-horizontal3s ease 0s infinite running progressbar-indeterminate-animation-horizontal
Description
The gradient size of the horizontal indeterminate ProgressBar.
$kendo-progressbar-indeterminate-animation-vertical3s ease 0s infinite running progressbar-indeterminate-animation-vertical
Description
The gradient size of the vertical indeterminate ProgressBar.
$kendo-progressbar-chunk-bordervar( --kendo-body-bg, initial )
Description
The border color of the chunk ProgressBar.
$kendo-circular-progressbar-arc-strokeif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
The arc stroke color of the circular ProgressBar.
$kendo-circular-progressbar-scale-stroke$kendo-progressbar-bg
Description
The scale stroke background color of the circular ProgressBar.

In this article

Not finding the help you need?