version bump

.version

@@ -1 +1 @@
-2.8.3
+2.8.5

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;
 }

files/pswp/default-skin/default-skin.css

@@ -35,8 +35,7 @@
           transition: opacity 0.2s;
   -webkit-box-shadow: none;
           box-shadow: none; }
-  .pswp__button:focus,
+  .pswp__button:focus, .pswp__button:hover {
-  .pswp__button:hover {
     opacity: 1; }
   .pswp__button:active {
     outline: none;
@@ -272,14 +271,13 @@ a.pswp__share--download:hover {
     color: #BBB; }
 
 .pswp__caption__center {
-  text-align: center;
+  text-align: left;
   max-width: 420px;
   margin: 0 auto;
   font-size: 13px;
   padding: 10px;
   line-height: 20px;
-  color: #CCC; 
+  color: #CCC; }
-  font-weight: bold; }
 
 .pswp__caption--empty {
   display: none; }

files/pswp/default-skin/default-skin.svg

@@ -1,131 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
-<svg
-   width="264"
-   height="88"
-   viewBox="0 0 264 88"
-   version="1.1"
-   id="svg12"
-   sodipodi:docname="default-skin.svg"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <defs
-     id="defs12" />
-  <sodipodi:namedview
-     id="namedview12"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="true"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="true"
-     inkscape:deskcolor="#d1d1d1"
-     showborder="true"
-     borderlayer="true"
-     inkscape:zoom="3.0855569"
-     inkscape:cx="95.606729"
-     inkscape:cy="65.142212"
-     inkscape:window-width="1896"
-     inkscape:window-height="1016"
-     inkscape:window-x="1932"
-     inkscape:window-y="52"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g11" />
-  <title
-     id="title1">default-skin 2</title>
-  <g
-     fill="none"
-     fill-rule="evenodd"
-     id="g12">
-    <g
-       id="g11">
-      <g
-         fill="#fff"
-         id="g1">
-        <path
-           d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z"
-           id="path1" />
-      </g>
-      <g
-         fill="#fff"
-         id="g2">
-        <path
-           d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"
-           id="path2" />
-      </g>
-      <path
-         d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z"
-         fill="#fff"
-         id="path3" />
-      <path
-         d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z"
-         fill="#fff"
-         id="path4" />
-      <path
-         d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z"
-         fill="#fff"
-         id="path5" />
-      <g
-         id="g6">
-        <path
-           id="Rectangle-11"
-           fill="#fff"
-           d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z" />
-        <path
-           d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z"
-           id="Oval-1"
-           stroke="#fff"
-           stroke-width="1.5" />
-        <path
-           fill="#fff"
-           d="M150 21h5v1h-5z"
-           id="path6" />
-      </g>
-      <g
-         id="g10">
-        <path
-           d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z"
-           fill="#fff"
-           id="path7" />
-        <path
-           d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z"
-           stroke="#fff"
-           stroke-width="1.5"
-           id="path8" />
-        <path
-           fill="#fff"
-           d="M106 21h5v1h-5z"
-           id="path9" />
-        <path
-           fill="#fff"
-           d="M109.043 19.008l-.085 5-1-.017.085-5z"
-           id="path10" />
-      </g>
-      <g
-         id="g14">
-        <path
-           id="Shape"
-           style="fill:#ffffff"
-           d="M 63.708984 57.572266 L 63.708984 66.917969 L 62.773438 66.917969 L 59.173828 66.917969 L 65.089844 72.916016 L 71.173828 66.917969 L 67.40625 66.917969 L 66.640625 66.917969 L 66.640625 57.572266 L 63.708984 57.572266 z " />
-        <path
-           id="rect13"
-           style="fill:#ffffff;stroke:#ffffff;stroke-width:0.649;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
-           d="m 56.24391,72.078606 v 3.51729 h 17.859837 v -3.51729 h -1.210961 v 2.324677 H 57.456705 v -2.324677 z" />
-      </g>
-    </g>
-  </g>
-  <metadata
-     id="metadata12">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:title>default-skin 2</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-</svg>

files/pswp/photoswipe.css

@@ -15,21 +15,14 @@
   touch-action: none;
   z-index: 1500;
   -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
   /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
   -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
+  outline: none; }
-  outline: none;
-}
-
   .pswp * {
     -webkit-box-sizing: border-box;
-  box-sizing: border-box;
+            box-sizing: border-box; }
-}
-
   .pswp img {
-  max-width: none;
+    max-width: none; }
-}
 
 /* style is added when JS option showHideOpacity is set to true */
 .pswp--animate_opacity {
@@ -38,33 +31,28 @@
   will-change: opacity;
   /* for open/close transition */
   -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
-  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
-}
 
 .pswp--open {
-  display: block;
+  display: block; }
-}
 
 .pswp--zoom-allowed .pswp__img {
   /* autoprefixer: off */
   cursor: -webkit-zoom-in;
   cursor: -moz-zoom-in;
-  cursor: zoom-in;
+  cursor: zoom-in; }
-}
 
 .pswp--zoomed-in .pswp__img {
   /* autoprefixer: off */
   cursor: -webkit-grab;
   cursor: -moz-grab;
-  cursor: grab;
+  cursor: grab; }
-}
 
 .pswp--dragging .pswp__img {
   /* autoprefixer: off */
   cursor: -webkit-grabbing;
   cursor: -moz-grabbing;
-  cursor: grabbing;
+  cursor: grabbing; }
-}
 
 /*
 	Background is added as a separate element.
@@ -78,10 +66,10 @@
   height: 100%;
   background: #000;
   opacity: 0;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
   -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
+  will-change: opacity; }
-  will-change: opacity;
-}
 
 .pswp__scroll-wrap {
   position: absolute;
@@ -89,8 +77,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow: hidden; }
-}
 
 .pswp__container,
 .pswp__zoom-wrap {
@@ -100,8 +87,7 @@
   left: 0;
   right: 0;
   top: 0;
-  bottom: 0;
+  bottom: 0; }
-}
 
 /* Prevent selection and tap highlights */
 .pswp__container,
@@ -111,8 +97,7 @@
   -ms-user-select: none;
       user-select: none;
   -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
+  -webkit-touch-callout: none; }
-}
 
 .pswp__zoom-wrap {
   position: absolute;
@@ -122,27 +107,22 @@
   transform-origin: left top;
   /* for open/close transition */
   -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
-  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
+          transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
-}
 
 .pswp__bg {
   will-change: opacity;
   /* for open/close transition */
   -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
-  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
+          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
-}
 
 .pswp--animated-in .pswp__bg,
 .pswp--animated-in .pswp__zoom-wrap {
   -webkit-transition: none;
-  transition: none;
+  transition: none; }
-}
 
 .pswp__container,
 .pswp__zoom-wrap {
-  -webkit-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden; }
-  backface-visibility: hidden;
-}
 
 .pswp__item {
   position: absolute;
@@ -150,40 +130,34 @@
   right: 0;
   top: 0;
   bottom: 0;
-  overflow: hidden;
+  overflow: hidden; }
-}
 
 .pswp__img {
   position: absolute;
   width: auto;
   height: auto;
   top: 0;
-  left: 0;
+  left: 0; }
-}
 
 /*
 	stretched thumbnail or div placeholder element (see below)
 	style is added to avoid flickering in webkit/blink when layers overlap
 */
 .pswp__img--placeholder {
-  -webkit-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden; }
-  backface-visibility: hidden;
-}
 
 /*
 	div element that matches size of large image
 	large image loads on top of it
 */
 .pswp__img--placeholder--blank {
-  background: #222;
+  background: #222; }
-}
 
 .pswp--ie .pswp__img {
   width: 100% !important;
   height: auto !important;
   left: 0;
-  top: 0;
+  top: 0; }
-}
 
 /*
 	Error message appears when image is not loaded
@@ -198,10 +172,8 @@
   font-size: 14px;
   line-height: 16px;
   margin-top: -8px;
-  color: #CCC;
+  color: #CCC; }
-}
 
 .pswp__error-msg a {
   color: #CCC;
-  text-decoration: underline;
+  text-decoration: underline; }
-}

templates/functionality.js

@@ -1,9 +1,6 @@
 class PhotoGallery {
   constructor() {
     this.pswpElement = document.querySelector(".pswp");
-    this.re = /pid=(\d+)/;
-    this.filterRe = /#(.*)/;
-    this.recursiveRe = /\?recursive/;
     this.items = [];
     this.shown = [];
     this.subfolders = [];
@@ -57,7 +54,7 @@ class PhotoGallery {
     const controller = new AbortController();
     const signal = controller.signal;
     this.controllers[imgIndex] = controller;
-    const urlToFetch = this.items[imgIndex]?.src;
+    const urlToFetch = this.shown[imgIndex]?.src;
     if (urlToFetch) {
       fetch(urlToFetch, { method: "GET", signal }).catch(() => {});
     }
@@ -71,25 +68,33 @@ class PhotoGallery {
   }
 
   reset() {
-    const curr = window.location.href.split("#");
     const content = document.documentElement.innerHTML;
     const title = document.title;
     const folders = document.querySelector(".folders");
+    let path = window.location.origin + window.location.pathname;
+    if (path.startsWith("null")) {
+      path = window.location.protocol + "//" + path.substring(4);
+    }
+
     if (folders) folders.style.display = "";
     document.getElementById("recursive").checked = false;
     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 },
-      "",
-      curr[0].split("?")[0] + "#"
-    );
     this.requestMetadata();
   }
 
+  showLoader() {
+    const imagelist = document.getElementById("imagelist");
+    imagelist.innerHTML = '<span class="loader"></span>';
+    imagelist.classList.add("centerload");
+    imagelist.classList.remove("row");
+  }
+
   async recursive() {
-    const curr = window.location.href.split("#");
+    this.showLoader();
+    const loc = new URL(window.location.href);
     const content = document.documentElement.innerHTML;
     const title = document.title;
     const isChecked = document.getElementById("recursive")?.checked;
@@ -97,21 +102,16 @@ class PhotoGallery {
 
     if (!isChecked) {
       if (folders) folders.style.display = "";
-      window.history.replaceState(
+      loc.searchParams.delete("recursive");
-        { html: content, pageTitle: title },
+      window.history.replaceState({ html: content, pageTitle: title }, "", loc);
-        "",
-        curr[0].split("?")[0] + "#" + (curr[1] || "")
-      );
       this.requestMetadata();
       return;
     }
 
     if (folders) folders.style.display = "none";
-    window.history.replaceState(
+    loc.searchParams.delete("recursive");
-      { html: content, pageTitle: title },
+    loc.searchParams.append("recursive", true);
-      "",
+    window.history.replaceState({ html: content, pageTitle: title }, "", loc);
-      curr[0].split("?")[0] + "?recursive#" + (curr[1] || "")
-    );
 
     const visited = new Set();
     const existingItems = new Set();
@@ -164,6 +164,9 @@ class PhotoGallery {
   }
 
   requestMetadata() {
+    this.showLoader();
+    const hash = window.location.hash;
+    const searchParams = new URLSearchParams(window.location.search);
     fetch(".metadata.json")
       .then((response) => {
         if (!response.ok) throw new Error("Failed to fetch metadata");
@@ -173,33 +176,31 @@ class PhotoGallery {
         this.items = Object.values(data.images || {});
         this.subfolders = data.subfolders || [];
 
-        if (this.filterRe.test(window.location.href)) {
+        if (hash != "") {
-          const selected = window.location.href
+          const selected = hash.replace("#", "").split(",");
-            .match(this.filterRe)[1]
-            .split(",");
           this.setFilter(selected);
         }
-        if (this.recursiveRe.test(window.location.href)) {
+        if (searchParams.get("recursive") != null) {
           const recChk = document.getElementById("recursive");
           if (recChk) recChk.checked = true;
           this.recursive();
         } else {
           this.filter();
         }
-        if (this.re.test(window.location.href)) {
-          const pid = window.location.href.match(this.re)[1];
-          this.openSwipe(parseInt(pid));
-        }
       })
       .catch(() => {});
   }
 
   filter() {
+    const searchParams = new URLSearchParams(window.location.search);
     this.shown = [];
-    const curr = window.location.href.split("#")[0] + "#";
+    let path = decodeURIComponent(
-    const path = decodeURIComponent(
+      window.location.origin +
-      window.location.href.split("#")[0].replace("index.html", "")
+        window.location.pathname.replace("index.html", "")
     );
+    if (path.startsWith("null")) {
+      path = window.location.protocol + "//" + path.substring(4);
+    }
     const selectedTags = [];
 
     document
@@ -230,7 +231,7 @@ class PhotoGallery {
 
       if (include || selectedTags.length === 0) {
         if (!isRecursiveChecked) {
-          if (decodeURIComponent(item.src.replace(item.name, "")) === path) {
+          if (decodeURIComponent(item.src).replace(item.name, "") === path) {
             this.shown.push(item);
           }
         } else {
@@ -239,7 +240,12 @@ class PhotoGallery {
       }
     }
     this.updateImageList();
-    window.location.href = curr + urltags;
+    window.location.hash = urltags;
+
+    const pid = searchParams.get("pid") - 1;
+    if (pid != -1) {
+      this.openSwipe(pid);
+    }
   }
 
   updateImageList() {
@@ -248,10 +254,12 @@ class PhotoGallery {
     let str = "";
     this.shown.forEach((item, index) => {
       str += `<div class="column"><figure><img src="${item.msrc}" data-index="${index}" /><figcaption class="caption">${item.name}`;
-      if (item.tiff) str += ` <a href="${item.tiff}">TIFF</a>`;
+      if (item.tiff) str += `&nbsp;<a href="${item.tiff}">TIFF</a>`;
-      if (item.raw) str += ` <a href="${item.raw}">RAW</a>`;
+      if (item.raw) str += `&nbsp;<a href="${item.raw}">RAW</a>`;
       str += "</figcaption></figure></div>";
     });
+    imagelist.classList.add("row");
+    imagelist.classList.remove("centerload");
     imagelist.innerHTML = str;
   }
 

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

@@ -117,3 +117,23 @@ body {
   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);

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);

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);

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);