refactor loader & icons a bit

src/icons/loading.svg

@@ -0,0 +1,42 @@
+<svg width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <style>
+            /* From https://codepen.io/mrrocks/pen/EiplA */
+            @keyframes loader-rotator {
+                0% {
+                    transform: rotate(0deg);
+                }
+                100% {
+                    transform: rotate(270deg);
+                }
+            }
+
+            @keyframes loader-dash {
+                0% {
+                    stroke-dashoffset: 187;
+                }
+                50% {
+                    stroke-dashoffset: 46.75;
+                    transform: rotate(135deg);
+                }
+                100% {
+                    stroke-dashoffset: 187;
+                    transform: rotate(450deg);
+                }
+            }
+
+
+            svg[icon-type="dribbblish"][icon-name="loading"] {
+                animation: loader-rotator 1.4s linear infinite;
+            }
+
+            svg[icon-type="dribbblish"][icon-name="loading"] circle {
+                stroke-dasharray: 187;
+                stroke-dashoffset: 0;
+                transform-origin: center;
+                animation: loader-dash 1.4s ease-in-out infinite;
+            }
+        </style>
+    </defs>
+    <circle fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+</svg>

src/js/Icons.js

@@ -6,6 +6,7 @@ export default class Icons {
     /**
      * @typedef {Object} IconOptions
      * @property {IconStyle} [style="round"]
+     * @property {String} [className=""]
      * @property {Number} [size=16]
      * @property {Number} [scale=1]
      * @property {String} [fill="currentColor"]
@@ -66,6 +67,7 @@ export default class Icons {
         /** @type {IconOptions} */
         const defaultOptions = {
             style: this.#getDefaultStyle(name),
+            className: "",
             size: 16,
             scale: 1,
             fill: "currentColor",
@@ -75,12 +77,18 @@ export default class Icons {
 
         const svg = parseSVG(this.getRawSVG(name, options.style));
 
+        // Add general / required attributes
         svg.attributes["icon-type"] = "dribbblish";
+        svg.attributes["icon-name"] = name;
         svg.attributes["icon-style"] = options.style;
         svg.attributes.fill = options.fill;
         svg.attributes.width = options.size;
         svg.attributes.height = options.size;
 
+        // Add className
+        if (options.className != "") svg.attributes.class = options.className;
+
+        // Add Styles
         // Create CSSStyleDeclaration by creating an element since there is no constructor for it
         const styles = document.createElement("a").style;
         if (options.scale != 1) {
@@ -92,6 +100,7 @@ export default class Icons {
             return child;
         });
 
+        // Add title
         if (options.title != null) {
             svg.children.push({
                 name: "title",

src/js/Loader.js

@@ -1,3 +1,5 @@
+import { icons } from "./Icons";
+
 export default class Loader {
     /** @type {HTMLDivElement} */
     #container;
@@ -7,10 +9,8 @@ export default class Loader {
         this.#container.id = "dribbblish-loader";
         this.#container.innerHTML = /* html */ `
             <div>
-                <svg width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+                ${icons.get("loading", { size: 64 })}
-                    <circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+                <span></span>
-                </svg>
-                <span>Loading...</span>
             </div>
         `;
 
@@ -18,7 +18,7 @@ export default class Loader {
     }
 
     show(text) {
-        this.#container.querySelector("span").innerText = text ?? "";
+        this.#container.querySelector("span").innerText = text ?? "Loading...";
         this.#container.setAttribute("active", "");
     }
 

src/styles/Loader.scss

@@ -1,9 +1,3 @@
-// From https://codepen.io/mrrocks/pen/EiplA
-@use "sass:math";
-
-$offset: 187;
-$duration: 1.4s;
-
 #dribbblish-loader {
     z-index: 999999;
     position: fixed;
@@ -38,38 +32,7 @@ $duration: 1.4s;
         align-items: center;
 
         svg {
-            animation: rotator $duration linear infinite;
+            color: spiceColor("text");
-
-            circle {
-                stroke: spiceColor("text");
-                stroke-dasharray: $offset;
-                stroke-dashoffset: 0;
-                transform-origin: center;
-                animation: dash $duration ease-in-out infinite;
-            }
         }
     }
 }
-
-@keyframes rotator {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(270deg);
-    }
-}
-
-@keyframes dash {
-    0% {
-        stroke-dashoffset: $offset;
-    }
-    50% {
-        stroke-dashoffset: math.div($offset, 4);
-        transform: rotate(135deg);
-    }
-    100% {
-        stroke-dashoffset: $offset;
-        transform: rotate(450deg);
-    }
-}