Colorful Bottom Pageload Progress Bar v2.0 CSS mod
-
@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:
-
@stardepp u forgot about the 2nd half of the instruction?
Remember to do the same with preloading bar in 2nd last line.
-
@dude99 Now I understand everything and now everything is in the right place
-
@dude99 I have adjusted the code a bit for me:
/* Colorful Pageload indicator - made by dude99 on the Vivaldi Forums */ .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator {position:fixed; z-index:9; top: unset; top: 76px; left:0; height:6px; 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 5s 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 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='2']:not([value='2'])::-webkit-progress-value {background: linear-gradient(90deg, red 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='3']:not([value='3'])::-webkit-progress-value {background: linear-gradient(90deg, red 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='4']:not([value='4'])::-webkit-progress-value {background: linear-gradient(90deg, red 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='5']:not([value='5'])::-webkit-progress-value {background: linear-gradient(90deg, darkred, gold 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='6']:not([value='6'])::-webkit-progress-value {background: linear-gradient(90deg, red 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='7']:not([value='7'])::-webkit-progress-value {background: linear-gradient(90deg, red 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='8']:not([value='8'])::-webkit-progress-value {background: linear-gradient(90deg, red 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='9']:not([value='9'])::-webkit-progress-value {background: linear-gradient(90deg, darkred 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value='100']::-webkit-progress-value {background: linear-gradient(90deg, darkred, red 90%);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value='0'] + .pageload-ticker::after {content:''; position:fixed; top: 76px; left:0; z-index:1; border-top: 4.3px dotted magenta; width: 100vw; animation: fade 5000ms 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: 88px;} /* optional: raise the progressbar a bit during normal window */