How do I change the color of the progress bar in the address bar in Vivaldi using CSS?
-
I used to have a CSS mod that modified the color of the progress bar in Vivaldi's address bar to match my theme instead of a using the default "dark shade". However, I forgot to backup the CSS file and I want the mod to better visualize web-page loading progress in Vivaldi. I do not know the CSS code responsible for the progress bar in the Vivaldi address bar. I was hoping someone smart from the Vivaldi forums can provide me a solution of CSS code that I can add to Vivaldi.
-
@mgunt5 Here are the selectors you need to set the color for the foreground and background parts of the progress bar:
/* Address field progress bar foreground */ .UrlBar-AddressField .pageload .pageload-indicator::-webkit-progress-value { background-color: blue; } /* Address field progress bar background */ .UrlBar-AddressField .pageload .pageload-indicator::-webkit-progress-bar { background-color: red; }
Then to get the color to match your theme, you could change out the example
red
andblue
from above with a theme color variable.var(--colorHighlightBg)
might be a good choice. You can find the other variable names by inspecting the#browser
DIV
.How to inspect the UI: https://forum.vivaldi.net/topic/16684/inspecting-the-vivaldi-ui-with-devtools
Edit: There is also an opacity value of
0.25
set on the progress bar, so you may want to adjust that to get a more colorful look./* Increase address field progress bar opacity */ .UrlBar-AddressField .pageload .pageload-indicator { opacity: 1; }
-
@nomadic I really like this modification.
I am always very happy when I discover a new modification.
I changed both colours to blue because I changed my Vivaldi design yesterday. All highlights in blue. -
And if you want to have an easier time testing out different colors, this might be useful:
- Change the
class
field of the.pageload
DIV
to:pageload progressing
- Adjust the
value
field of the.pageload-indicator
to something lower than100
like50
- Change the
-
Thank you all!