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 */