ferdi2go/Pigmento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Lottie-Animation neben Pigmento-Titel im Header

Browse Source 
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>
This commit is contained in:
Ferdinand
2026-04-03 13:55:11 +02:00
parent ad04577ce2
commit f5a976b3a4
2 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@@ -8,7 +8,10 @@
</head> </head>
<body> <body>
<header> <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> <nav>
<button class="tab-btn active" data-tab="picker">Picker</button> <button class="tab-btn active" data-tab="picker">Picker</button>
<button class="tab-btn" data-tab="eingabe">Eingabe</button> <button class="tab-btn" data-tab="eingabe">Eingabe</button>
@@ -161,6 +164,16 @@
</div> </div>
</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 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> </body>
</html> </html>

2
style.css
View File

@@ -16,7 +16,7 @@ header {
z-index: 10; z-index: 10;
} }
header h1 { font-size: 1.2rem; margin-bottom: 0.75rem; } header h1 { font-size: 1.2rem; margin-bottom: 0; }
nav { display: flex; gap: 0.5rem; } nav { display: flex; gap: 0.5rem; }