Customize Progress Bar

---

In this documentation, we will see how to customize the progress bar's background with a linear gradient and also customize the tooltip. The Progress Bar widget provides built-in tooltip functionality that can be customized to display relevant information and style the tooltip as needed.

Progress Bar Gradient

Markup

<wm-progress-bar datavalue="32" name="progress_bar1" margin="200px 50px unset 50px"></wm-progress-bar>

Style

.app-progress-bar-bg {
    height: 25px;
}

.app-default-progress-bar.app-progress-bar-bg {
    background-color: #ccd3ed;
}

.app-progress-bar .app-progress-bar-bg {
    background-color: linear-gradient(90deg, #44aaf4, #087fd5);
}

Progress Bar Tooltip

Markup

<wm-progress-bar datavalue="32" name="progress_bar1" margin="200px 50px unset 50px" showtooltip="true" tooltipposition="up" on-tooltiptext="progress_bar1Tooltiptext($event, widget, minVal, maxVal, percentage)"></wm-progress-bar>

Style

.app-progress-bar-tooltip {
    background-color: #000;
    width: 70px;
    height: 25px;
    left: -35px;
    top: -50px;
    border-radius: 8px;
}

.app-progress-bar-tooltip-label {
    color: #fff;
}

.app-progress-bar-tooltip-triangle {
    border-bottom-color: #000;
}

note

Use border-bottom-color to change the background color of the tooltip triangle.

Script

The progress_bar1Tooltiptext function is called when the tooltip is displayed. The value returned by this function will be used to show the custom text in the tooltip instead of the default progress percentage.

Page.progress_bar1Tooltiptext = function ($event, widget, minVal, maxVal, percentage) {
    if (percentage < 35) {
        return 'LOW';
    } else if (percentage < 70) {
        return 'MEDIUM';
    } else {
        return 'HIGH';
    }
};