Colorful Bottom Pageload Progress Bar v2.0 CSS mod
-
Here is a revision of my 2018 Standalone pageload loading bar CSS mod as promised many weeks ago! :smiling_face_with_open_mouth_closed_eyes:
(Click GIF for full size screenshot)
ReadMe
-
Just like my Colorful Loading Ring CSS mod, you need to enable both Page Load Progress bar & Addressbar in Settings for this CSS mod to work properly, this mod might still work if you hide 'em with CSS mod.
-
This mod will relocate the progressbar to the bottom of the window, just above the Statusbar by default setup. If you have disabled or modded the Statusbar, then follow customization instruction 8 below.
-
This mod also add a blinking dotted magenta Preloading indicator, which indicate Vivaldi have begin connecting to a host server getting ready to load a webpage.
Code
/* Colorful Pageload indicator */ .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator {position:fixed; z-index:9; top: unset; bottom: 23px; left:0; height:3px; width:100vw; background: transparent; border-radius:0; opacity:1; transform: skew(-60deg); -webkit-mask-image: linear-gradient(90deg, transparent 0 2px, black 0); -webkit-mask-size: 12px 100%; animation: mask-stripes 3s linear infinite !important;} @keyframes mask-stripes {100% {-webkit-mask-position: 48px 0;}} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='0']::-webkit-progress-value {background: firebrick;} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='1']:not([value='1']):not([value='100'])::-webkit-progress-value {background: linear-gradient(90deg, firebrick, crimson 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='2']:not([value='2'])::-webkit-progress-value {background: linear-gradient(90deg, crimson, orangered 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='3']:not([value='3'])::-webkit-progress-value {background: linear-gradient(90deg, orangered, darkorange 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='4']:not([value='4'])::-webkit-progress-value {background: linear-gradient(90deg, darkorange, orange 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='5']:not([value='5'])::-webkit-progress-value {background: linear-gradient(90deg, orange, gold 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='6']:not([value='6'])::-webkit-progress-value {background: linear-gradient(90deg, gold, chartreuse 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='7']:not([value='7'])::-webkit-progress-value {background: linear-gradient(90deg, chartreuse, limegreen 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='8']:not([value='8'])::-webkit-progress-value {background: linear-gradient(90deg, limegreen, mediumseagreen 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='9']:not([value='9'])::-webkit-progress-value {background: linear-gradient(90deg, mediumseagreen, dodgerblue 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value='100']::-webkit-progress-value {background: linear-gradient(90deg, dodgerblue, deepskyblue 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value='0'] + .pageload-ticker::after {content:''; position:fixed; bottom: 23px; left:0; z-index:1; border-top: 4.3px dotted magenta; width: 100vw; animation: fade 500ms ease-out alternate infinite !important;} /* optional: show blinking dotted magenta preloading bar */ .normal .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator, .normal .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value='0'] + .pageload-ticker::after {bottom: 23.5px;} /* optional: raise the progressbar a bit during normal window */
Customization
-
If you prefer a solid progressbar without animate stripes, simply remove
-webkit-mask-image: linear-gradient(90deg, transparent 0 2px, black 0); -webkit-mask-size: 12px 100%; animation: mask-stripes 3s linear infinite !important;
from line 2, plus entire line 3. -
Alternatively you can replace the moving stripes animation with simple blinking animation
animation: fade 500ms ease-out alternate infinite !important;
. This is a resource friendly animation which will works well even on potato hardware. -
You can remove the preloading blinking magenta dotted indicator by remove the 2nd last line.
-
You can tweak the slope effect via
transform: skew(-60deg);
in line 2. -
You can tweak the stripes via line 2:
transparent 0 2px
(2px = 2px of blank space); &-webkit-mask-size: 12px
will decide the length of the stripes (12px - 2px = 10px) . The value48px
in line 3 must be equal or multiply value of-webkit-mask-size
in order to keep a perfect animation loop. -
You can alter the moving stripes' speed via
animation: mask-stripes 3s linear infinite !important;
in line 2, increase3s
value to slow down the movement, & vice versa. -
You can move the progress bar to the top by remove
bottom
in line 2 & entire last line, then tweaktop
value depended on your GUI setup.76px
should work in top tabbar setup,59px
for side/bottom tabbar. Remember to do the same with preloading indicator in 2nd last line. -
If you have disabled the Statusbar, or using my automate status bar, status bar clock CSS mod, (or other mod which relocated the status bar), then you probably should alter the
bottom
value at line 2 to1px
,1.5px
in 2nd last line, &2px
in the last line to keep the progressbar at the very bottom of the window.
Ok, this should cover most of the basis. Hopefully this will provide a basic framework for u all to customize your own colorful pageload progress bar. Please post your fork code & screenshot if you manage to come up with different variation of customization! -
-
I just installed your mod on me, but I can't see a colorful pageload progress bar in my Vivaldi.
-
@stardepp it's at the BOTTOM of the window.
-
@dude99 I have nothing at the bottom, I have my status bar at the top. Is that why it doesn't work for me?
-
@stardepp
Oh, dang it. I forgot about status bar on default setup... Well, you can raise it up a bit withbottom:22px
.Can u post a full window screenshot of your setup?
R u using any mod that affect the addressbar? -
I use /Highlight Color Base Domain/
-
@stardepp Can't really figure out what's wrong with the css u provided, I have updated the OP code a bit. Try & see if it work...
Can u test it without the statusbar mod?
-
@dude99 I removed all other .css modification and installed only Colorful Pageload Progress Bar v2.0 CSS mod, still no colorful progress bar became visible.
-
@stardepp included the statusbar mod? Also, what version of vivaldi u r using? I never tested it on snapshot.
-
@dude99 No, I had removed the Stautsbar mod as well. I use Vivaldi Stable 3.5.2115.87
-
@stardepp This is really weird, I'm using the same version & tested with all css & js mod removed, & it works. Can u please check Settings > Address Bar > Address field options > Page load progress bar is enabled?
EEDIT: OP code updated again.
-
-
@stardepp Good. Is it the settings or something else?
-
@dude99 It is not displayed in the right place for me because my status bar is placed above the address bar.
-
@stardepp Read the instruction 8 under Customization in the OP.
-
-
@dude99 I still thank you very much for your patience
-
@stardepp That's no good, if u want the progress bar on the top & below addressbar u should follow instruction 7 instead.
bottom: 960px
will move it outside of the window when you resize the window height... -
@dude99 Thanks for this tip. I have changed it that way:
top: 76px
And the progress bar is in the right place.
Just insanely good, what you can change everything with Vivaldi
here is an overview of all my modifications:
https://forum.vivaldi.net/topic/55164/i-am-very-enthusiastic-about-the-vivaldi-community
-
But there is a second progress bar at the bottom: