feat: Lottie-Animation neben Pigmento-Titel im Header

Fluid Loading Animation.json via lottie-web (CDN) als 36x36px SVG animiert neben dem h1-Titel. Loop, autoplay, kein Build-Schritt nötig. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-03 13:55:11 +02:00
parent ad04577ce2
commit f5a976b3a4
2 changed files with 15 additions and 2 deletions
--- a/index.html
+++ b/index.html
@@ -8,7 +8,10 @@
 </head>
 <body>
  <header>
-    <h1>Pigmento</h1>
+    <div style="display:flex;align-items:center;gap:0.4rem;margin-bottom:0.75rem">
+      <div id="lottie-logo" style="width:36px;height:36px;flex-shrink:0"></div>
+      <h1 style="margin-bottom:0">Pigmento</h1>
+    </div>
    <nav>
      <button class="tab-btn active" data-tab="picker">Picker</button>
      <button class="tab-btn" data-tab="eingabe">Eingabe</button>
@@ -161,6 +164,16 @@
    </div>
  </div>

+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
  <script type="module" src="js/app.js"></script>
+  <script>
+    lottie.loadAnimation({
+      container: document.getElementById('lottie-logo'),
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      path: 'Fluid Loading Animation.json'
+    });
+  </script>
 </body>
 </html>