From 78f570e8b5f4c6090c57a6c98d92fd0d50fc0e53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20Erbsh=C3=A4u=C3=9Fer?= <tobias@tesoft.dev>
Date: Sun, 24 May 2026 09:30:41 +0200
Subject: [PATCH] add loader component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
---
 frontend/src/components/loader.njk | 41 ++++++++++++++++++++++++++++++
 frontend/src/components/loader.ts  | 15 +++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 frontend/src/components/loader.njk
 create mode 100644 frontend/src/components/loader.ts

diff --git a/frontend/src/components/loader.njk b/frontend/src/components/loader.njk
new file mode 100644
index 0000000..c824571
--- /dev/null
+++ b/frontend/src/components/loader.njk
@@ -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>
diff --git a/frontend/src/components/loader.ts b/frontend/src/components/loader.ts
new file mode 100644
index 0000000..9bc37bb
--- /dev/null
+++ b/frontend/src/components/loader.ts
@@ -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);