How to: Customize Progress bar

The default progress bar in ITSM Portal do look like this:

However, some people prefer to have a bigger progress bar like this:

To expand the with of the progress bar, a small customization as outlined below must be done:
* Create the file custom.css in the folder \wwwroot\lib\ui\themes\<yourselectedtheme>\enduser\
* Create the file custom.css in the folder \wwwroot\lib\ui\themes\<yourselectedtheme>\analyst\
* Add the following content to both files:

/* Bigger Loading bar and different color as default*/

#loading-bar .bar {
    height: 8px !important;
    background-color: red !important
}
  • Save the changes, clear your browser cache and reload the page

Note that the example css above also contains a rule to change the color of the loading bar. You can replace the color red with any color you like, see the following website on how you can define a color in css: https://www.w3schools.com/html/html_colors.asp