bar progress stats fill animation scaleX Stat-Sektionen mit animierten Prozentbalken Skill-Listen auf Portfolio-Seiten Fortschrittsanzeigen in Feature-Übersichten Statische Balken ohne Bewegung wirken leblos Eingangsanimation für Zahlen/Stats ohne JS
Bar Grow
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/bar-grow.json Background
Customize
Quick Start
<div class="h-2 overflow-hidden rounded-full bg-neutral-200"><span class="bar-grow" style="--bar-target: 80%; --bar-color: oklch(60% 0.15 250)"></span></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 522 bytes · 27 lines
- Custom Properties
-
--bar-target--bar-duration--bar-delay--bar-color - Classes
-
.bar-grow
bar progress stats fill animation scaleX
Nutzt scaleX(0) → scaleX(1) mit transform-origin: left center — der Balken wächst von links nach rechts. --bar-target setzt die finale Breite via width, --bar-color die Füllfarbe. Das --bar-delay ermöglicht gestaffelte Stat-Listen.