use css ::part to style ajax loader

basher · Apr 12, 2024 · 12f70f7 · 12f70f7
1 parent 1778111
commit 12f70f7
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 40 deletions.
diff --git a/ui/npm-shrinkwrap.json b/ui/npm-shrinkwrap.json
diff --git a/ui/package.json b/ui/package.json
@@ -2,7 +2,7 @@
     "name": "web-ui-boilerplate",
     "description": "UI boilerplate for websites/webapps using vanilla HTML/CSS/JavaScript, powered by Storybook, bundled by Parcel.",
     "author": "basher",
-    "version": "3.1.0",
+    "version": "3.1.1",
     "license": "ISC",
     "repository": {
         "type": "git",

diff --git a/ui/src/javascript/web-components/webui-ajax-loader.ts b/ui/src/javascript/web-components/webui-ajax-loader.ts
@@ -11,43 +11,11 @@ export default class WebUIAjaxLoader extends HTMLElement {
                 xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink"
                 viewBox="0 0 100 100"
+                part="svg"
             >
                 <title>loading</title>
-                <circle cx="50" cy="50" r="47"/>
+                <circle cx="50" cy="50" r="47" />
             </svg>
-
-            <style>
-                circle {
-                    animation: 1.4s ease-in-out infinite both circle-animation;
-                    display: block;
-                    fill: transparent;
-                    stroke: currentColor;
-                    stroke-dasharray: 283;
-                    stroke-dashoffset: 280;
-                    stroke-linecap: round;
-                    stroke-width: 0.375rem;
-                    transform-origin: 50% 50%;
-                }
-
-                @keyframes circle-animation {
-                    0%,
-                    25% {
-                        stroke-dashoffset: 280;
-                        transform: rotate(0);
-                    }
-
-                    50%,
-                    75% {
-                        stroke-dashoffset: 75;
-                        transform: rotate(45deg);
-                    }
-
-                    100% {
-                        stroke-dashoffset: 280;
-                        transform: rotate(360deg);
-                    }
-                }
-            </style>
         `;
     }
 }
diff --git a/ui/src/stylesheets/web-components/_webui-ajax-loader.scss b/ui/src/stylesheets/web-components/_webui-ajax-loader.scss
@@ -14,15 +14,25 @@ Dependencies.
 // @use '../mixins' as *;
 
 webui-ajax-loader {
-    animation: 2s linear infinite svg-animation;
+    animation: 1.2s linear infinite loader-animation;
     block-size: 3rem;
     display: block;
-    fill: currentColor;
     inline-size: 3rem;
     margin: auto;
 
+    &::part(svg) {
+        animation: 1.2s ease-in-out infinite both svg-animation;
+        fill: transparent;
+        stroke: currentColor;
+        stroke-dasharray: 300;
+        stroke-dashoffset: 75;
+        stroke-linecap: round;
+        stroke-width: 0.375rem;
+        transform-origin: 50% 50%;
+    }
+
     /* stylelint-disable-next-line order/order */
-    @keyframes svg-animation {
+    @keyframes loader-animation {
         0% {
             transform: rotateZ(0deg);
         }
@@ -31,4 +41,23 @@ webui-ajax-loader {
             transform: rotateZ(360deg);
         }
     }
+
+    @keyframes svg-animation {
+        0%,
+        25% {
+            stroke-dashoffset: 280;
+            transform: rotate(0);
+        }
+
+        50%,
+        75% {
+            stroke-dashoffset: 75;
+            transform: rotate(45deg);
+        }
+
+        100% {
+            stroke-dashoffset: 280;
+            transform: rotate(360deg);
+        }
+    }
 }