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-inline-size | Null | null | null |
Description
Inline size of the progressbar. Width when horizontal, height when vertical. | |||
| $kendo-progressbar-block-size | Null | null | null |
Description
Block size of the progressbar. Height when horizontal, width when vertical. | |||
| $kendo-progressbar-border-width | Null | null | null |
Description
Border width of the progressbar. | |||
| $kendo-progressbar-border-radius | Null | null | null |
Description
Border radius of the progressbar. | |||
| $kendo-progressbar-font-family | Null | null | null |
Description
Font family of the progressbar. | |||
| $kendo-progressbar-font-size | Null | null | null |
Description
Font size of the progressbar. | |||
| $kendo-progressbar-line-height | Null | null | null |
Description
Line height of the progressbar. | |||
| $kendo-progressbar-animation-timing | List | 1s linear infinite | 1s linear infinite |
Description
Animation timing of the progressbar. | |||
| $kendo-progressbar-status-padding-x | Null | null | null |
Description
Inline padding of the progressbar status. | |||
| $kendo-progressbar-status-padding-y | Null | null | null |
Description
Block padding of the progressbar status. | |||
| $kendo-progressbar-bg | Color | k-try-shade( $kendo-component-bg, 1 ) | #ebebeb |
Description
Background color of the progressbar. | |||
| $kendo-progressbar-text | Color | $kendo-component-text | #494949 |
Description
Text color of the progressbar. | |||
| $kendo-progressbar-border | Color | $kendo-component-border | #ededed |
Description
Border color of the progressbar. | |||
| $kendo-progressbar-gradient | Null | null | null |
Description
Background gradient of the progressbar. | |||
| $kendo-progressbar-value-bg | Color | $kendo-color-primary | #622331 |
Description
Progress background color of the progressbar. | |||
| $kendo-progressbar-value-text | Color | k-contrast-legacy( $kendo-progressbar-value-bg ) | white |
Description
Progress text color of the progressbar. | |||
| $kendo-progressbar-value-border | Color | k-try-shade( $kendo-progressbar-value-bg ) | #5a202d |
Description
Progress border color of the progressbar. | |||
| $kendo-progressbar-value-gradient | Null | null | null |
Description
Progress background gradient of the progressbar. | |||
| $kendo-progressbar-indeterminate-bg | Color | $kendo-progressbar-bg | #ebebeb |
Description
Background color of the indeterminate progressbar. | |||
| $kendo-progressbar-indeterminate-text | Color | $kendo-progressbar-text | #494949 |
Description
Text color of the indeterminate progressbar. | |||
| $kendo-progressbar-indeterminate-border | Color | $kendo-progressbar-border | #ededed |
Description
Border color of the indeterminate progressbar. | |||
| $kendo-progressbar-indeterminate-gradient | Null | null | null |
Description
Background gradient of the indeterminate progressbar. | |||
| $kendo-progressbar-chunk-border | Color | $kendo-body-bg | #ffffff |
Description
Border color of the chunk progressbar. | |||
| $kendo-circular-progressbar-arc-stroke | Color | $kendo-color-primary | #622331 |
Description
Arc stroke color of the circular progressbar. | |||
| $kendo-circular-progressbar-scale-stroke | Color | $kendo-progressbar-bg | #ebebeb |
Description
Scale stroke background color of the circular progressbar. | |||
| $kendo-progressbar-theme | Map | (
DEFAULT: (
bg: k-get-theme-color( neutral, 100 ),
text: k-get-theme-color( neutral, 700 ),
border: k-get-theme-color( neutral, 200 ),
| (DEFAULT: (bg: #ededed, text: #494949, border: #d6d6d6, value-bg: #622331, value-text: #ffffff, value-border: #622331)) |
Description
Theme colors map of the progressbar. | |||
