Progress Bar
- Last UpdatedJun 22, 2023
- 1 minute read
You can modify the style for the HTML elements of Progress Bar using SVG elements and CSS classes.
|
HTML Element |
CSS Class |
|---|---|
|
Unit of Measurement (UOM) |
.skprogress-uom#skprogress-uomid |
|
Value |
.skprogress-value#skprogress-valueid |
|
Title |
.skprogress-title#skprogress-titleid |
|
Scale Ticks |
.skprogress-scaleticks |
|
Scale Text |
.skprogress-scaletext#skprogress-scaletextid |
Prefix the Custom Style Identifier of a control with the CSS Class name to apply the style to the specific control. For example:
/* progress1id is the Custom Style Identifier of the Progress Bar control. */
.progress1id_skctr
Note: If you plan to use your own CSS file, the Custom Style Identifier that you define in the file must match the value that you specify in the Custom Style Sheet Identifier property in the Appearance tab of the control's properties page. For example: progress1id
Example
/* Change scale text fill color and font to black and Roboto. */
.progress1id_skctr .skprogress-scaletext#skprogress-scaletextid
{
fill: black !important;
font-family: 'Roboto' !important;
font-weight: 400 !important;
font-size: 15px !important;
}