added loader to imagelist

StaticGalleryBuilder.code-workspace

@@ -90,6 +90,8 @@
           "Scans",
           "--exclude-folder",
           "*/Galleries/*",
+          "--exclude-folder",
+          "*/Wallpaper/*",
           "--folderthumbnails"
         ],
         "console": "integratedTerminal",
@@ -160,10 +162,12 @@
       }
     ],
     "prettier.htmlWhitespaceSensitivity": "css",
-    "pylint.args": [
+    "python-envs.pythonProjects": [
-      "--disable=C0111",
+      {
-      "--disable=C0301",
+        "path": "",
-      "--good-names-rgxs=^[_a-z][_a-z0-9]?$"
+        "envManager": "ms-python.python:pyenv",
+        "packageManager": "ms-python.python:pip"
+      }
     ],
     "python.analysis.inlayHints.callArgumentNames": "off",
     "python.analysis.inlayHints.functionReturnTypes": false,

files/global.css

@@ -66,6 +66,13 @@ body {
   padding: 0 2px;
 }
 
+.centerload {
+  margin-top: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 figure {
   margin: 0;
 }

templates/functionality.js

@@ -81,15 +81,19 @@ class PhotoGallery {
     document
       .querySelectorAll("#tagdropdown input.tagcheckbox:checked")
       .forEach((checkbox) => (checkbox.checked = false));
-    window.history.replaceState(
+    window.history.replaceState({ html: content, pageTitle: title }, "", path);
-      { html: content, pageTitle: title },
-      "",
-      path
-    );
     this.requestMetadata();
   }
 
+  showLoader() {
+    const imagelist = document.getElementById("imagelist");
+    imagelist.innerHTML = '<span class="loader"></span>';
+    imagelist.classList.add("centerload");
+    imagelist.classList.remove("row");
+  }
+
   async recursive() {
+    this.showLoader();
     const loc = new URL(window.location.href);
     const content = document.documentElement.innerHTML;
     const title = document.title;
@@ -160,6 +164,7 @@ class PhotoGallery {
   }
 
   requestMetadata() {
+    this.showLoader();
     const hash = window.location.hash;
     const searchParams = new URLSearchParams(window.location.search);
     fetch(".metadata.json")
@@ -190,7 +195,8 @@ class PhotoGallery {
     const searchParams = new URLSearchParams(window.location.search);
     this.shown = [];
     let path = decodeURIComponent(
-      window.location.origin + window.location.pathname.replace("index.html", "")
+      window.location.origin +
+        window.location.pathname.replace("index.html", "")
     );
     if (path.startsWith("null")) {
       path = window.location.protocol + "//" + path.substring(4);
@@ -252,7 +258,11 @@ class PhotoGallery {
       if (item.raw) str += `&nbsp;<a href="${item.raw}">RAW</a>`;
       str += "</figcaption></figure></div>";
     });
-    imagelist.innerHTML = str;
+    setTimeout(function () {
+      imagelist.classList.add("row");
+      imagelist.classList.remove("centerload");
+      imagelist.innerHTML = str;
+    }, 5000);
   }
 
   setFilter(selected) {

themes/alpenglow-dark.css

@@ -118,3 +118,23 @@ body {
   color: var(--bcolor1);
   font-weight: 600;
 }
+
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 3px solid var(--bcolor1);
+  border-right: 3px solid transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+} 

themes/alpenglow.css

@@ -116,4 +116,24 @@ body {
   background-color: var(--color2);
   color: var(--bcolor2);
   font-weight: 600;
-}
+}
+
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 3px solid var(--bcolor2);
+  border-right: 3px solid transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+} 

themes/aritim-dark.css

@@ -96,6 +96,52 @@
   font-weight: 600;
 }
 
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite
+}
+
+.loader::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 5px solid var(--bcolor2);
+  animation: prixClipFix 2s linear infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
+  }
+
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
+  }
+
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
+  }
+
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
+  }
+
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
+  }
+}
+
 body {
   color: var(--bcolor2);
   background-color: var(--bcolor3);

themes/aritim.css

@@ -96,6 +96,52 @@
   font-weight: 600;
 }
 
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite
+}
+
+.loader::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 5px solid var(--bcolor2);
+  animation: prixClipFix 2s linear infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
+  }
+
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
+  }
+
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
+  }
+
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
+  }
+
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
+  }
+}
+
 body {
   color: var(--bcolor2);
   background-color: var(--bcolor3);

themes/autumn.css

@@ -1,14 +1,22 @@
 @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap");
 
 * {
-  --color1: #FF7F50; /* Coral */
+  --color1: #FF7F50;
-  --color2: #D2691E; /* Chocolate */
+  /* Coral */
-  --color3: #8B4513; /* SaddleBrown */
+  --color2: #D2691E;
-  --color4: #FFA07A; /* LightSalmon */
+  /* Chocolate */
-  --bcolor1: #FFF8DC; /* Cornsilk */
+  --color3: #8B4513;
-  --bcolor2: #2F4F4F; /* DarkSlateGray */
+  /* SaddleBrown */
-  --bcolor3: #3E2723; /* Darker brown */
+  --color4: #FFA07A;
-  --bcolor4: #4E342E; /* Slightly lighter brown */
+  /* LightSalmon */
+  --bcolor1: #FFF8DC;
+  /* Cornsilk */
+  --bcolor2: #2F4F4F;
+  /* DarkSlateGray */
+  --bcolor3: #3E2723;
+  /* Darker brown */
+  --bcolor4: #4E342E;
+  /* Slightly lighter brown */
 }
 
 .navbar {
@@ -102,6 +110,54 @@
   font-family: "Playfair Display", serif;
 }
 
+.loader,
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  animation-fill-mode: both;
+  animation: bblFadInOut 1.8s infinite ease-in-out;
+}
+
+.loader {
+  color: var(--bcolor2);
+  font-size: 7px;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  animation-delay: -0.16s;
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.loader:before {
+  left: -3.5em;
+  animation-delay: -0.32s;
+}
+
+.loader:after {
+  left: 3.5em;
+}
+
+@keyframes bblFadInOut {
+
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em
+  }
+
+  40% {
+    box-shadow: 0 2.5em 0 0
+  }
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);
@@ -109,4 +165,4 @@ body {
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
-}
+}

themes/carnation.css

@@ -95,6 +95,36 @@
   font-weight: 800;
 }
 
+.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: var(--color1);
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
+  }
+
+  33% {
+    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
+  }
+
+  66% {
+    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
+  }
+
+  100% {
+    box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
+  }
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);

themes/catpuccin.css

@@ -103,6 +103,91 @@
   font-family: "Nunito", sans-serif;
 }
 
+.loader {
+  transform: rotateZ(45deg);
+  perspective: 1000px;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  color: var(--color1);
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  transform: rotateX(70deg);
+  animation: 1s spin linear infinite;
+}
+
+.loader:after {
+  color: var(--bcolor4);
+  transform: rotateY(70deg);
+  animation-delay: .4s;
+}
+
+@keyframes rotate {
+  0% {
+    transform: translate(-50%, -50%) rotateZ(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotateZ(360deg);
+  }
+}
+
+@keyframes rotateccw {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(-360deg);
+  }
+}
+
+@keyframes spin {
+
+  0%,
+  100% {
+    box-shadow: .2em 0px 0 0px currentcolor;
+  }
+
+  12% {
+    box-shadow: .2em .2em 0 0 currentcolor;
+  }
+
+  25% {
+    box-shadow: 0 .2em 0 0px currentcolor;
+  }
+
+  37% {
+    box-shadow: -.2em .2em 0 0 currentcolor;
+  }
+
+  50% {
+    box-shadow: -.2em 0 0 0 currentcolor;
+  }
+
+  62% {
+    box-shadow: -.2em -.2em 0 0 currentcolor;
+  }
+
+  75% {
+    box-shadow: 0px -.2em 0 0 currentcolor;
+  }
+
+  87% {
+    box-shadow: .2em -.2em 0 0 currentcolor;
+  }
+}
+
 body {
   color: var(--bcolor2);
   background-color: var(--bcolor3);

themes/cornflower.css

@@ -95,6 +95,36 @@
   font-weight: 800;
 }
 
+.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: var(--color1);
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
+  }
+
+  33% {
+    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
+  }
+
+  66% {
+    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
+  }
+
+  100% {
+    box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
+  }
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);

themes/default-dark.css

@@ -74,6 +74,27 @@
   font-weight: 800;
 }
 
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 3px solid var(--bcolor1);
+  border-right: 3px solid transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--color4);

themes/default.css

@@ -74,6 +74,27 @@
   font-weight: 800;
 }
 
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 3px solid var(--bcolor2);
+  border-right: 3px solid transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 body {
   color: var(--bcolor2);
   background-color: var(--bcolor1);

themes/ivy.css

@@ -93,6 +93,36 @@
   background-color: var(--color1);
 }
 
+.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: var(--color1);
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
+  }
+
+  33% {
+    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
+  }
+
+  66% {
+    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
+  }
+
+  100% {
+    box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
+  }
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);

themes/kjoe.css

@@ -94,6 +94,36 @@
   font-weight: 800;
 }
 
+.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: var(--bcolor1);
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
+  }
+
+  33% {
+    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
+  }
+
+  66% {
+    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
+  }
+
+  100% {
+    box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
+  }
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor2);

themes/monokai-vibrant.css

@@ -77,6 +77,91 @@
   font-weight: 800;
 }
 
+.loader {
+  transform: rotateZ(45deg);
+  perspective: 1000px;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  color: var(--color2);
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  transform: rotateX(70deg);
+  animation: 1s spin linear infinite;
+}
+
+.loader:after {
+  color: var(--color4);
+  transform: rotateY(70deg);
+  animation-delay: .4s;
+}
+
+@keyframes rotate {
+  0% {
+    transform: translate(-50%, -50%) rotateZ(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotateZ(360deg);
+  }
+}
+
+@keyframes rotateccw {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) rotate(-360deg);
+  }
+}
+
+@keyframes spin {
+
+  0%,
+  100% {
+    box-shadow: .2em 0px 0 0px currentcolor;
+  }
+
+  12% {
+    box-shadow: .2em .2em 0 0 currentcolor;
+  }
+
+  25% {
+    box-shadow: 0 .2em 0 0px currentcolor;
+  }
+
+  37% {
+    box-shadow: -.2em .2em 0 0 currentcolor;
+  }
+
+  50% {
+    box-shadow: -.2em 0 0 0 currentcolor;
+  }
+
+  62% {
+    box-shadow: -.2em -.2em 0 0 currentcolor;
+  }
+
+  75% {
+    box-shadow: 0px -.2em 0 0 currentcolor;
+  }
+
+  87% {
+    box-shadow: .2em -.2em 0 0 currentcolor;
+  }
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor4);

themes/rainbow.css

@@ -98,6 +98,36 @@
   font-weight: 800;
 }
 
+.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: var(--color4);
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
+  }
+
+  33% {
+    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
+  }
+
+  66% {
+    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
+  }
+
+  100% {
+    box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
+  }
+}
+
 body {
   color: var(--bcolor3);
   background-color: var(--bcolor1);

themes/spring.css

@@ -1,14 +1,22 @@
 @import url("https://fonts.googleapis.com/css2?family=Lora:wght@300;400;500;600;700&display=swap");
 
 * {
-  --color1: #FFB6C1; /* LightPink */
+  --color1: #FFB6C1;
-  --color2: #98FB98; /* PaleGreen */
+  /* LightPink */
-  --color3: #FFD700; /* Gold */
+  --color2: #98FB98;
-  --color4: #87CEFA; /* LightSkyBlue */
+  /* PaleGreen */
-  --bcolor1: #FFFFFF; /* White */
+  --color3: #FFD700;
-  --bcolor2: #2F4F4F; /* DarkSlateGray */
+  /* Gold */
-  --bcolor3: #FAF0E6; /* Linen */
+  --color4: #87CEFA;
-  --bcolor4: #E6E6FA; /* Lavender */
+  /* LightSkyBlue */
+  --bcolor1: #FFFFFF;
+  /* White */
+  --bcolor2: #2F4F4F;
+  /* DarkSlateGray */
+  --bcolor3: #FAF0E6;
+  /* Linen */
+  --bcolor4: #E6E6FA;
+  /* Lavender */
 }
 
 .navbar {
@@ -102,6 +110,54 @@
   font-family: "Lora", serif;
 }
 
+.loader,
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  animation-fill-mode: both;
+  animation: bblFadInOut 1.8s infinite ease-in-out;
+}
+
+.loader {
+  color: var(--bcolor2);
+  font-size: 7px;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  animation-delay: -0.16s;
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.loader:before {
+  left: -3.5em;
+  animation-delay: -0.32s;
+}
+
+.loader:after {
+  left: 3.5em;
+}
+
+@keyframes bblFadInOut {
+
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em
+  }
+
+  40% {
+    box-shadow: 0 2.5em 0 0
+  }
+}
+
 body {
   color: var(--bcolor2);
   background-color: var(--bcolor3);
@@ -109,4 +165,4 @@ body {
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
-}
+}

themes/steam.css

@@ -102,6 +102,52 @@
   font-weight: 700;
 }
 
+.loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  animation: rotate 1s linear infinite
+}
+
+.loader::before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 5px solid var(--color2);
+  animation: prixClipFix 2s linear infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg)
+  }
+}
+
+@keyframes prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
+  }
+
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
+  }
+
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
+  }
+
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
+  }
+
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
+  }
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor2);
@@ -109,4 +155,4 @@ body {
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
-}
+}

themes/summer.css

@@ -104,6 +104,54 @@
   font-family: "Roboto", sans-serif;
 }
 
+.loader,
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  animation-fill-mode: both;
+  animation: bblFadInOut 1.8s infinite ease-in-out;
+}
+
+.loader {
+  color: var(--bcolor2);
+  font-size: 7px;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  animation-delay: -0.16s;
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.loader:before {
+  left: -3.5em;
+  animation-delay: -0.32s;
+}
+
+.loader:after {
+  left: 3.5em;
+}
+
+@keyframes bblFadInOut {
+
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em
+  }
+
+  40% {
+    box-shadow: 0 2.5em 0 0
+  }
+}
+
 body {
   color: var(--bcolor2);
   background-color: var(--bcolor3);

themes/sunflower.css

@@ -96,6 +96,36 @@
   font-weight: 800;
 }
 
+.loader {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  display: block;
+  margin: 15px auto;
+  position: relative;
+  color: var(--color1);
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow: -38px -12px, -14px 0, 14px 0, 38px 0;
+  }
+
+  33% {
+    box-shadow: -38px 0px, -14px -12px, 14px 0, 38px 0;
+  }
+
+  66% {
+    box-shadow: -38px 0px, -14px 0, 14px -12px, 38px 0;
+  }
+
+  100% {
+    box-shadow: -38px 0, -14px 0, 14px 0, 38px -12px;
+  }
+}
+
 body {
   color: var(--bcolor1);
   background-color: var(--bcolor3);

themes/winter.css

@@ -111,6 +111,54 @@
   font-family: "Montserrat", sans-serif;
 }
 
+.loader,
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+  width: 2.5em;
+  height: 2.5em;
+  animation-fill-mode: both;
+  animation: bblFadInOut 1.8s infinite ease-in-out;
+}
+
+.loader {
+  color: var(--bcolor2);
+  font-size: 7px;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+  animation-delay: -0.16s;
+}
+
+.loader:before,
+.loader:after {
+  content: '';
+  position: absolute;
+  top: 0;
+}
+
+.loader:before {
+  left: -3.5em;
+  animation-delay: -0.32s;
+}
+
+.loader:after {
+  left: 3.5em;
+}
+
+@keyframes bblFadInOut {
+
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em
+  }
+
+  40% {
+    box-shadow: 0 2.5em 0 0
+  }
+}
+
 body {
   color: var(--bcolor2);
   background-color: var(--bcolor3);