Better Clarity Green Progressbar CSS mod
-
Nothing spectacular, just a simple green color progressbar to improve clarity a bit on some dark theme, & sometimes the crazy accent color. LOL
Green progressbar CSS mod:
Default dark theme comparison:
Code
.UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator {opacity: 1 !important; box-shadow: inset 0 0 0 .2px lime; background: rgb(0 255 0 / 10%);} .theme-dark .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator {background: rgb(0 255 0 / 20%);}
ReadMe
-
The 2nd line allow you to change dark theme's progressbar color, so you can have different colors & opacity for both theme, if you desire so.
-
The
20%
inrgb(0 255 0 / 20%)
means opacity 20%, you can alter it to manipulate the visibility of the color.
My other progressbar related CSS mod:
Colorful Bottom Pageload Progress Bar
Colorful Loading Ring CSS mod -
-
This will provide a simple green underline instead:
.UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator {opacity: 1 !important; background: linear-gradient(0deg, var(--colorSuccessBg) 1.5px, transparent 0);}
-
updated code for v3.7. Replace
var(--colorSuccessBgAlpha)
green with Lime color, cuz it's more readable in both light & dark theme. -
@dude99 Ok, I will add this later.
-
@dude99 said in Better Clarity Green Progressbar CSS mod:
This will provide a simple green underline instead:
.UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator {opacity: 1 !important; background: linear-gradient(0deg, var(--colorSuccessBg) 1.5px, transparent 0);}
Thank you!
Did some - a bit unknown - changes:
- Added
orange 4%
, the number and colour can be exchanged by preferred one - Source - Mozilla
/* Line Org .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator {opacity: 1 !important; background: linear-gradient(0deg, var(--colorSuccessBg) 1.5px, transparent 0);} */ /* Line Mod */ .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator {opacity: 1 !important; background: linear-gradient(0deg, orange 4%, var(--colorSuccessBg) 1.5px, transparent 0);}
Orange
10%
4%
4%
Lime
9%
- Added
-
@Zalex108 Nice one! Actually, u don't need the
var(--colorSuccessBg) 1.5px,
if you gonna replace the green line with orange one. -
@dude99 said in Better Clarity Green Progressbar CSS mod:
@Zalex108 Nice one! Actually, u don't need the
var(--colorSuccessBg) 1.5px,
if you gonna replace the green line with orange one.Thanks,
Saw the % gave the principle size, but didn't knew that part it's unnecessary in that case.First attempt with fully copied code
135deg, orange 60%, cyan
gave this: -
Hi, this might sound stupid but would it be possible to reverse the loading animation from right -> left to left -> right?
-
.UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator {opacity: 1 !important; background-color: transparent;} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator::-webkit-progress-value {box-shadow: inset 0 0 0 .2px lime; background: rgb(0 255 0 / 10%);} .theme-dark .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator::-webkit-progress-value {background: rgb(0 255 0 / 20%);}
-
Thanks @dude99 , it works just fine!