Colorful Loading Ring CSS mod
-
If you found the default pageload indicator inside Addressfield to be too subtle & difficult to see, here is a CSS mod to add an extra colorful loading ring at the bottom right corner of the window.
ReadMe:
-
Please enabled both Page Load Progress bar & Addressbar, this mod won't work if both are disabled in Settings, but might still work if you hide 'em using CSS mod.
-
You can change the loading ring location by altering
bottom/top
&right/left
values in line 2; or useleft:0; right:0; margin: auto;
to keep it centered. -
You can change the ring's background color by altering
#9995
value, example: some people preferredtransparent
orblack
/white
. -
If you prefer a full pie chart display instead of a ring, just remove
-webkit-mask-image: -webkit-radial-gradient(center, circle, transparent 0 17px, black 17.5px 20px);
in line 3. -
If u prefer static display without constant spinning, then remove
animation: spin 1s steps(60) infinite !important;
in line 3. If you want loading progress going clockwise, then addtransform: scaleX(-1);
. -
Other CSS mod which affecting the Addressbar might brake this mod, example: if you autohide Addressbar with
visibility: hidden
, then just addvisibility: visible
in line 2 to fix it. Else u can post your custom mod related to Addressbar here & I might be able to help you a bit...
Code
/* Pageload ring indicator */ .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator ~ .pageload-ticker:last-child {position:fixed; bottom:5px; right:0; width: 40px; height:40px; line-height:40px; color: white; text-align: center; text-shadow: 1px 1px 1px black, 0 0 3px black, 0 0 6px black; overflow: visible !important; display: flex; justify-content: center; align-items: center; padding:0 !important; border: none; opacity: 1;} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator ~ .pageload-ticker:last-child::before {content:''; position: absolute; z-index:-1; width:40px; height:40px; border-radius:50%; background: conic-gradient(deepskyblue, blue 27% 73%, deepskyblue); -webkit-mask-image: -webkit-radial-gradient(center, circle, transparent 0 17px, black 17.5px 20px); animation: spin 1s steps(60) infinite !important; transition: all .12s linear !important;} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='9']:not([value='9']) ~ .pageload-ticker:last-child::before {background: conic-gradient(#9995 0 10%, royalblue 0);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='8']:not([value='8']) ~ .pageload-ticker:last-child::before {background: conic-gradient(#9995 0 20%, dodgerblue 0);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='7']:not([value='7']) ~ .pageload-ticker:last-child::before {background: conic-gradient(#9995 0 30%, limegreen 0);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='6']:not([value='6']) ~ .pageload-ticker:last-child::before {background: conic-gradient(#9995 0 40%, chartreuse 0);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='5']:not([value='5']) ~ .pageload-ticker:last-child::before {background: conic-gradient(#9995 0 50%, gold 0);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='4']:not([value='4']) ~ .pageload-ticker:last-child::before {background: conic-gradient(#9995 0 60%, orange 0);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='3']:not([value='3']) ~ .pageload-ticker:last-child::before {background: conic-gradient(#9995 0 70%, darkorange 0);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='2']:not([value='2']) ~ .pageload-ticker:last-child::before {background: conic-gradient(#9995 0 80%, orangered 0);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='1']:not([value='1']):not([value='100']) ~ .pageload-ticker:last-child::before {background: conic-gradient(#9995 0 90%, red 0);} .UrlBar-AddressField .pageload:not(.unstarted).progressing .pageload-indicator[value^='0'] ~ .pageload-ticker:last-child::before {background: conic-gradient(#ff90ba, MediumVioletRed 27% 73%, #ff90ba);}
Also, you might wanna take a look at my other Colorful Bottom Pageload Progress Bar v2.0 CSS mod. And yes, you can install both together just because you can! LOLAlso, Happy New Year! May 2021 fare better than the previous one.
-
-
@dude99 Ooooh dude! I really know why I'm following you! Missing such mods isn't an option. I love that! Thank you so much and have a Happy New Year as well.
-
@Ornorm Did I take 1 hour to understand where the loading ring was to be shown? Yes!
(I did change lots of settings because I couldn't see it in the address bar ) -
I love this mod, thanks! But it doesn't seem to work. I enabled both the settings you told me to, but I don't see any loading ring. I don't have any other address bar mods.
-
@Vistaus U meant this?
If u did enabled both of 'em, then test this CSS mod again without any other CSS mod, included JS mod. If it work without other mods, then one or more mod u r using is breaking this CSS mod.
Also, I can't confirm this mod will work properly in snapshot, cuz I don't use snapshot version.
-
@dude99 said in Colorful Loading Ring CSS mod:
I can't confirm this mod will work properly in snapshot
I can confirm it works well in snapshot either.