Colorful Bottom Pageload Progress Bar v2.0 CSS mod
-
@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 */