melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: animate loading indicator

Browse Source
This commit is contained in:
mkelvers
2026-04-21 00:21:27 +02:00
parent 7a4bda43cd
commit 4263ead407
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/components/loading.templ
View File

@@ -1,10 +1,12 @@
package ui
templ LoadingIndicator(text string) {
<div class="inline-flex items-center gap-2 text-sm text-(--text-muted)">
<div class="h-1.5 w-1.5 bg-(--text-faint)"></div>
<div class="h-1.5 w-1.5 bg-(--text-faint)"></div>
<div class="h-1.5 w-1.5 bg-(--text-faint)"></div>
<span>{ text }</span>
<div class="flex flex-col items-center justify-center gap-4 py-12">
<div class="flex gap-1.5">
<span class="h-2 w-2 rounded-full bg-(--text-faint) animate-bounce" style="animation-delay: 0ms;"></span>
<span class="h-2 w-2 rounded-full bg-(--text-faint) animate-bounce" style="animation-delay: 150ms;"></span>
<span class="h-2 w-2 rounded-full bg-(--text-faint) animate-bounce" style="animation-delay: 300ms;"></span>
</div>
<span class="text-xs uppercase tracking-widest text-(--text-faint)">{ text }</span>
</div>
}