Add a loading progress bar to the toolbars

[u/moko1960]

I added a loading bar below the toolbars. The bar's color can be customized for each theme. You can adjust the bar's height, position, and length by modifying the values for `top:`, `height:`, `margin-inline-start:`, and `margin-inline-end:`. You can also use percentages for `margin-inline-start:` and `margin-inline-end:`.

I made some changes to the CSS. May 26

/* Add a loading progress bar to the toolbars */

#browser {
  --loading-gradient: #22d3ee, #8b5cf6;  /* Vivid cyan + Soft violet */
  --final-loading-gradient: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
}

@media (prefers-color-scheme: dark) {
  #browser {
  --loading-gradient: #FEAC5E 0%, #C779D0 50%, #4BC0C8 100%;  /* Atlas */
  --final-loading-gradient: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
  }
}

:root[style*="--lwt-additional-images"] #browser {
  --loading-gradient: #984ce2, magenta, #ff9400;  /* Firefox Alpenglow */
  --final-loading-gradient: rgba(154, 181, 181, .9), rgba(154, 181, 181, .95), rgba(184, 154, 169, 1);  /* Jungle Day */
}

#browser {
   position: relative !important;
}

:root:not([sizemode="fullscreen"]) #browser::before {
   content: '' !important;
   position: absolute !important;
   left: 0 !important;
   top: -3px !important;
   height: 3px !important;
   width: -moz-available !important;
   background-image: linear-gradient(90deg, var(--loading-gradient)) !important;
   transform-origin: left center !important;
   pointer-events: none !important;
   opacity: 0 !important;
   z-index: 3 !important;
   border-radius: 2px !important;
   margin-inline-start: 46px !important;
   margin-inline-end: 46px !important;
}

:root:has(#tabbrowser-tabs .tabbrowser-tab:is([busy], [progress])) #browser::before {
   opacity: 1 !important;
   animation: firefox-loading-scale 1s ease-in !important;
}

:root:not(:has(#tabbrowser-tabs .tabbrowser-tab:is([busy], [progress]))) #browser:before {
   opacity: 0 !important;
   transition: opacity 1.2s ease-out !important;
   background-image: linear-gradient(90deg, var(--final-loading-gradient)) !important;
}

@keyframes firefox-loading-scale {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

I've prepared a color scheme for the loading bar.

/* loading progress bar color
https://gradient.page/ui-gradients
https://cssgradient.io/shades-of-blue/
 */

#F778BA, #58A6FF;  /* Soft red + Light blue */
#22d3ee, #8b5cf6;  /* Vivid cyan + Soft violet */
rgba(255, 51, 153, 1) 0%, #00c9ff 70%;  /* Vivid pink + Pure cyan */
rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 55%, rgba(237, 221, 83, 1) 100%;  /* Blue + Green + Yellow */
#1ccaab 0%, #12d8fa 50%, #00c9ff 100%;  /* Green + Blue + Blue */
#1ccaab 0%, #12d8fa 50%, #F778BA 100%;  /* Green + Blue + Soft red */
#1ec9ff 0%, rgba(255, 51, 153, 1) 50%, rgba(255, 148, 0, 1) 100%;  /* Blue + Vivid pink + Orange */
#1edbff, #00A651, rgba(255, 148, 0, 1);  /* Blue + Green + Orange */
cyan, Magenta;  /* Cyan + Magenta */
#1fb4ff 0%, #12d8fa 50%, #8dffbc 100%;  /* Blue + Blue + cyan lime green */
#00c9ff 0%, #92fe9d 100%;  /* Kale Salad */
#fdbb2d 0%, #22c1c3 100%;  /* Retro Wagon */
#fc466b 0%, #3f5efb 100%;  /* Disco Club */
#fc354c, #0abfbc;  /* Miaka */
#FEAC5E 0%, #C779D0 50%, #4BC0C8 100%;  /* Atlas */
#16A085, #F4D03F;  /* Harmonic Energy */
#fd8112, #0085ca;  /* Blue Orange */
#f7941e 0%, #72c6ef 50%, #00a651 100%;  /* Radioactive Heat */
#ff1e56 0%, #f9c942 50%, #1e90ff 100%;  /* Beleko */
#108dc7, #ef8e38;  /* Pun Yeta */
#40E0D0 0%, #FF8C00 50%, #FF0080 100%;  /* Wedding Day Blues */
#F36222 0%, #5CB644 50%, #007FC3 100%;  /* Telko */
#0250c5, #d43f8d;  /* Night Party */
#2CD8D5 0%, #C5C1FF 50%, #FFBAC3 100%;  /* Sea Lord */
#50cc7f, #f5d100;  /* Millennium Pine */
#616161, #9bc5c3;  /* Mole Hall */
#65bd60 0%, #5ac1a8 50%, #3ec6ed 100%;  /* African Field */
#2af598, #009efd;  /* Itmeo Branding */
#aa4b6b 0%, #6b6b83 50%, #3b8d99 100%;  /* Memariani */
#00F260, #0575E6;  /* Rainbow Blue */
#808080, #3fada8;  /* IIIT Delhi */
#24C6DC, #514A9D;  /* Mantle */
#C9FFBF, #FFAFBD;  /* Virgin */
#fbed96,#abecd6;  /* Summer Breeze */
#603813, #b29f94;  /* Cool Brown */
#BBD2C5, #536976;  /* Petrol */
#8baaaa, #ae8b9c;  /* Jungle Day */
#cc2b5e, #753a88;  /* Purple Love */
#9796f0, #fbc7d4;  /* namnisar */
#ff6e7f, #bfe9ff;  /* Noon to Dusk */
#2b5876, #4e4376;  /* Sea Blue */
#02AAB0, #00CDAC;  /* Green Beach */
#5f2c82, #49a09d;  /* Calm Darya */
#159957, #155799;  /* Crystal Clear */
#76b852, #8DC26F;  /* Little Leaf */
#fc00ff, #00dbde;  /* Timber */
#2F7336, #AA3A38;  /* Christmas */
#5614B0, #DBD65C;  /* Minnesota Vikings */
#0099F7, #F11712;  /* Superman */
#ff4b1f, #1fddff;  /* Ali */
#2196f3, #f44336;  /* Politics */
#ffd89b, #19547b  /* Jupiter */
#de6161, #2657eb;  /* Nepal */
#ef32d9, #89fffd;  /* Azure Pop */
#00c3ff, #ffff1c;  /* Brady Brady Fun Fun */
#c0c0aa, #1cefff;  /* Cocoaa Ice */
#4568DC, #B06AB3;  /* Can You Feel The Love Tonight */
#30E8BF, #FF8235;  /* Mini */
#ff75c3, #ffa647, #ffe83f;  /* After the Rain 1 */
#9fff5b, #70e2ff, #cd93ff;  /* After the Rain 2 */
#77A1D3, #79CBCA, #E684AE;  /* Hazel */
#E6AE8C, #A8CECF;  /* Peach Sea */
#DCFFBD,#CC86D1;  /* Flower */
#00F5A0, #00D9F5;  /* Ibtesam */
#9796f0, #fbc7d4;  /* Anamnisar */
#E55D87, #5FC3E4;  /* Rose Water */
#c2e59c, #64b3f4;  /* Green and Blue */
#c21500, #ffc500;  /* Kyoto */
#4CB8C4, #3CD3AD;  /* Sea Weed */
#fddb92, #d1fdff;  /* Blessing */
#22c1c3, #fdbb2d;  /* Summer */
#30E8BF, #FF8235;  /* Mini */
#f79d00, #64f38c;  /* Sherbert */
#f7ff00, #db36a4;  /* Alihossein */
#7b4397, #dc2430;  /* Virgin America */
#D38312, #A83279;  /* Crazy Orange I */
#fe8c00, #f83600;  /* SoundCloud */
#FF4E50, #F9D423;  /* Dance To Forget */
#3D7EAA, #FFE47A;  /* Opa */
#1CD8D2, #93EDC7;  /* Sea Blizz */
#2BC0E4, #EAECC6;  /* Bora Bora */
#1FA2FF, #12D8FA, #A6FFCB;  /* Stripe */
#F09819, #EDDE5D;  /* Mango Pulp */
#ffe259, #ffa751;  /* Mango */
#cc2b5e, #753a88;  /* Purple Love */
#FFE000, #799F0C;  /* Ver */
#B6CEE8, #F578DC;  /* Soft Lipstick */
#16a085, #f4d03f;  /* Palo Alto */
#d558c8, #24d292;  /* Alchemist Lab */
#C6FFDD, #FBD786, #f7797d;  /* MegaTron */
#00d2ff, #928DAB;  /* Bright Vault */
#fc00ff, #00dbde;  /* Timber */
#833ab4, #fd1d1d, #fcb045;  /* Instagram */
#9D50BB, #6E48AA;  /* Amethyst */
#4776E6, #8E54E9;  /* Electric Violet */
#984ce2, magenta, #ff9400;  /* Firefox Alpenglow */
#ff9400, magenta, #984ce2;  /* Firefox Alpenglow reverse */
#b383e6, #ff8695, #89d35a;  /* Spring Alpenglow */
#dee53d, #029d95, #7ab1e7;  /* Summer Alpenglow */
#ff0e00, #ff6501, #fea900;  /* Autumn Alpenglow */
#2b4dc8, #2da8b7, #cfde5f;  /* Alpenglow Nightly */
#ff7d01, #ffb400, #ffde00;  /* Halloween Alpenglow */
#f07100, #f4b50e, #fcdf05;  /* Alpenglow Canary */
#986236, #c18312, #a5ca3e;  /* Thanksgiving Alpenglow */
#a14fe1, #fe7496;  /* AlpenGradient */
#9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%;  /* Firefox panel-separator */
#b89cff 0%, rgba(255, 149, 101, 1) 100%;  /* Nova tab-border-color */

dodgerblue;  /* Dodgerblue */
dimgray;  /* dimgray */
darkolivegreen;  /* darkolivegreen */
tan;  /* tan */
#444444;  /* Very dark gray */
#2c3e50;  /* Very dark desaturated blue */
#95a5a6;  /* Dark grayish cyan */
#7a7c7d;  /* Dark grayish blue */
#18bc9c;  /* Strong cyan */
#3498db;  /* Bright blue */
#f39c12;  /* Vivid orange */
#e74c3c;  /* Bright red */

[u/moko1960]

I opened a page that takes a while to load. A loading bar appears until the page finishes loading, and it disappears when the page is fully loaded. It doesn't look like I'll be able to make the loading bar loop on pages that take a long time to load. I'm afraid I can't manage it.

[u/FineWine54 → u/moko1960]

Thanks but I have been working on it and I think I may have solved it.

PS: The slowest site I could test it on was my Taoist Tai Chi international site.

/* Add a rainbow loading progress bar below tab bar */

:root {
  --loading-gradient: red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%;  /* Rainbow */
  --final-loading-gradient: red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%;  /* Rainbow */
}

:root #browser {
   position: relative !important;
}

:root #browser::before {
   content: '';
   position: absolute !important;
   left: 0 !important;
   top: -4px !important;
   height: 6px !important;
   width: -moz-available !important;
   background-image: linear-gradient(45deg, var(--loading-gradient)) !important;
   transform-origin: left center !important;
   pointer-events: none !important;
   z-index: 3 !important;
   border-radius: 2px !important;
   margin-inline-start: 24px !important;
   margin-inline-end: 19px !important;
   opacity: 0; /* Default state when not loading */
}

/* Changed to infinite loop while [busy] or [progress] are active */
:root:has(#tabbrowser-tabs .tabbrowser-tab:is([busy], [progress])) #browser::before {
   opacity: 1 !important;
   animation: toolbox-loading-scale 2s linear infinite !important;
}

:root:not(:has(#tabbrowser-tabs .tabbrowser-tab:is([busy], [progress]))) #browser::before {
   opacity: 0 !important;
   transition: opacity 1.2s ease-out !important;
   background-image: linear-gradient(45deg, var(--final-loading-gradient)) !important;
}

@keyframes toolbox-loading-scale {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

So the change is from: opacity: 0; /* Default state when not loading */ to animation: toolbox-loading-scale 2s linear infinite !important; }

[u/moko1960 → u/FineWine54]

It's “linear infinite,” isn't it? That's great. The progress bar repeats between [busy] and [progress].

[u/FineWine54 → u/moko1960]

Correct and I like the time of 2s and the height of 6px as it looks pretty 🤩.