New to Kendo UI for Angular? Start a free 30-day trial
Customizing Progressbar
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-progressbar-height | Number | 4px | 4px |
Description
The height of the ProgressBar. | |||
| $kendo-progressbar-horizontal-width | Number | 100% | 100% |
Description
The horizontal width of the ProgressBar. | |||
| $kendo-progressbar-animation-timing | List | 1s linear infinite | 1s linear infinite |
Description
The animation timing of the ProgressBar. | |||
| $kendo-progressbar-border-width | Number | 0px | 0px |
Description
The width of the border around the ProgressBar. | |||
| $kendo-progressbar-border-radius | String | var( --kendo-border-radius-sm, initial ) | var(--kendo-border-radius-sm, initial) |
Description
The border radius of the ProgressBar. | |||
| $kendo-progressbar-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the ProgressBar. | |||
| $kendo-progressbar-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the ProgressBar. | |||
| $kendo-progressbar-line-height | String | var( --kendo-line-height, inherit ) | var(--kendo-line-height, inherit) |
Description
The line height of the ProgressBar. | |||
| $kendo-progressbar-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the ProgressBar. | |||
| $kendo-progressbar-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the ProgressBar. | |||
| $kendo-progressbar-bg | String | if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) | var(--kendo-color-base-subtle, #edebe9) |
Description
The background color of the ProgressBar. | |||
| $kendo-progressbar-text | String | var( --kendo-component-text, initial ) | var(--kendo-component-text, initial) |
Description
The text color of the ProgressBar. | |||
| $kendo-progressbar-border | String | $kendo-progressbar-bg | var(--kendo-color-base-subtle, #edebe9) |
Description
The border color of the ProgressBar. | |||
| $kendo-progressbar-gradient | Null | null | null |
Description
The background gradient of the ProgressBar. | |||
| $kendo-progressbar-value-bg | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The progress background color of the ProgressBar. | |||
| $kendo-progressbar-value-text | String | var( --kendo-component-text, initial ) | var(--kendo-component-text, initial) |
Description
The progress text color of the ProgressBar. | |||
| $kendo-progressbar-value-border | String | $kendo-progressbar-value-bg | var(--kendo-color-primary, #0078d4) |
Description
The progress border color of the ProgressBar. | |||
| $kendo-progressbar-value-gradient | Null | null | null |
Description
The progress background gradient of the ProgressBar. | |||
| $kendo-progressbar-offset-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The progress status offset of the ProgressBar. | |||
| $kendo-progressbar-vertical-status-offset | Calculation | calc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1) | calc((var(--kendo-font-size-sm, inherit) * var(--kendo-line-height, inherit) + var(--kendo-spacing-2, 0.5rem)) * -1) |
Description
The progress status offset of the vertical ProgressBar. | |||
| $kendo-progressbar-disabled-bg | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent) |
Description
The background color of the disabled ProgressBar. | |||
| $kendo-progressbar-disabled-text | String | if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent) |
Description
The text color of the disabled ProgressBar. | |||
| $kendo-progressbar-disabled-border | String | $kendo-progressbar-disabled-bg | color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 6%, transparent) |
Description
The border color of the disabled ProgressBar. | |||
| $kendo-progressbar-value-disabled-bg | String | if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-30 )) | var(--kendo-color-primary-subtle, #deecf9) |
Description
The progress background color of the disabled ProgressBar. | |||
| $kendo-progressbar-indeterminate-bg | String | if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) | var(--kendo-color-base-subtle, #edebe9) |
Description
The background color of the indeterminate ProgressBar. | |||
| $kendo-progressbar-indeterminate-text | String | $kendo-progressbar-text | var(--kendo-component-text, initial) |
Description
The text color of the indeterminate ProgressBar. | |||
| $kendo-progressbar-indeterminate-border | String | if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 )) | var(--kendo-color-base-subtle, #edebe9) |
Description
The border color of the indeterminate ProgressBar. | |||
| $kendo-progressbar-indeterminate-gradient-horizontal | String | linear-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%) | linear-gradient(270deg, var(--kendo-color-base-subtle, #edebe9) 15%, var(--kendo-color-primary, #0078d4) 50%, var(--kendo-color-base-subtle, #edebe9) 85%) |
Description
The background gradient of the horizontal indeterminate ProgressBar. | |||
| $kendo-progressbar-indeterminate-gradient-vertical | String | linear-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%) | linear-gradient(180deg, var(--kendo-color-base-subtle, #edebe9) 15%, var(--kendo-color-primary, #0078d4) 50%, var(--kendo-color-base-subtle, #edebe9) 85%) |
Description
The background gradient of the vertical indeterminate ProgressBar. | |||
| $kendo-progressbar-indeterminate-animation-horizontal | List | 3s ease 0s infinite running progressbar-indeterminate-animation-horizontal | 3s ease 0s infinite running progressbar-indeterminate-animation-horizontal |
Description
The gradient size of the horizontal indeterminate ProgressBar. | |||
| $kendo-progressbar-indeterminate-animation-vertical | List | 3s ease 0s infinite running progressbar-indeterminate-animation-vertical | 3s ease 0s infinite running progressbar-indeterminate-animation-vertical |
Description
The gradient size of the vertical indeterminate ProgressBar. | |||
| $kendo-progressbar-chunk-border | String | var( --kendo-body-bg, initial ) | var(--kendo-body-bg, initial) |
Description
The border color of the chunk ProgressBar. | |||
| $kendo-circular-progressbar-arc-stroke | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The arc stroke color of the circular ProgressBar. | |||
| $kendo-circular-progressbar-scale-stroke | String | $kendo-progressbar-bg | var(--kendo-color-base-subtle, #edebe9) |
Description
The scale stroke background color of the circular ProgressBar. | |||
