add loader component

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
2026-05-24 09:30:41 +02:00
parent b4b06bfa42
commit 78f570e8b5
2 changed files with 56 additions and 0 deletions
@@ -0,0 +1,41 @@
+<template id="tesoft-loader-template">
+    <style>
+        @import "/src/styles/default.css";
+
+        :host {
+            display: block;
+            opacity: 60%;
+            width: 4.8rem;
+            height: 4.8rem;
+        }
+
+        @keyframes rotate {
+            from {
+                transform: rotate(360deg);
+            }
+            to {
+                transform: rotate(0deg);
+            }
+        }
+
+        .loading {
+            animation: rotate 2s linear infinite;
+            transform-origin: center;
+        }
+    </style>
+
+    <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="32" cy="32" r="32" stroke-width="1.5783"/>
+        <path d="m32 2a30 30 0 0 0-30 30 30 30 0 0 0 30 30 30 30 0 0 0 30-30 30 30 0 0 0-30-30zm0 4a26 26 0 0 1 26 26 26 26 0 0 1-26 26 26 26 0 0 1-26-26 26 26 0 0 1 26-26zm0 19a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7z"
+              fill="#fff" stroke-width="1.0568"/>
+        <path class="loading"
+              d="m32 9a23 23 0 0 0-23 23h5a18 18 0 0 1 18-18v-5zm0 7a16 16 0 0 0-16 16h5a11 11 0 0 1 11-11v-5zm11 16a11 11 0 0 1-11 11v5a16 16 0 0 0 16-16h-5zm7 0a18 18 0 0 1-18 18v5a23 23 0 0 0 23-23h-5z"
+              fill="#fff" stroke-width="2.4251"/>
+        <path d="m45.645 32.951-12.727 12.729 2.1211 2.1211-16.199 16.199h11.312l10.543-10.543 2.1211 2.1211 12.729-12.727-9.9004-9.9004z"
+              stroke-width="2"/>
+        <path d="m45.645 35.779-9.8984 9.9004 2.1211 2.1211-16.199 16.199h5.6562l13.371-13.371 2.1211 2.1211 9.9004-9.8984-7.0723-7.0723zm0 4.2441 2.8281 2.8281-5.6562 5.6562-2.8281-2.8281 5.6562-5.6562z"
+              fill="#fff" stroke-width="1.184"/>
+    </svg>
+</template>
+
+<script src="/src/components/loader.ts" type="module"></script>
@@ -0,0 +1,15 @@
+import {TesoftComponent} from "../scripts/main.ts";
+
+export class TesoftLoader extends TesoftComponent {
+    constructor() {
+        super();
+
+        const template = document.getElementById("tesoft-loader-template") as HTMLTemplateElement;
+        const templateContent = template.content;
+
+        const shadowRoot = this.attachShadow({mode: "open"});
+        shadowRoot.appendChild(templateContent.cloneNode(true));
+    }
+}
+
+customElements.define("tesoft-loader", TesoftLoader);