StatsCounter

Inhalt

Scroll-getriggerte Zähler: Zahlen zählen mit easeOutExpo hoch, sobald die Sektion sichtbar wird (IntersectionObserver). Optional mit animiertem SVG-Progress-Ring. Deutsche Zahlenformatierung.

Live Demo

Jahre Erfahrung

Gäste pro Monat

0,0

Google-Bewertung

Weiterempfehlung

Die Zähler starten, sobald die Sektion ins Sichtfeld scrollt.

Props / API

Prop	Typ	Pflicht	Default	Beschreibung
`stats`	`StatItem[]`	Ja	—	Statistiken {value, label, prefix?, suffix?, decimals?, ring?}
`duration`	`number`	Nein	`2000`	Animationsdauer in Millisekunden
`accentColor`	`string`	Nein	`'#0d9488'`	Akzentfarbe (Ring + Gradient-Start)
`accentColorEnd`	`string`	Nein	`'#38bdf8'`	Zweite Gradient-Farbe der Zahlen
`theme`	`'light' \| 'dark'`	Nein	`'light'`	Farbschema
`className`	`string`	Nein	—	Zusätzliche CSS-Klasse

Code-Beispiel

<StatsCounter
  stats={[
    { value: 25, suffix: '+', label: 'Jahre Erfahrung' },
    { value: 1250, label: 'Zufriedene Gäste pro Monat' },
    { value: 4.9, decimals: 1, label: 'Google-Bewertung', ring: 98 },
    { value: 98, suffix: '%', label: 'Weiterempfehlung', ring: 98 },
  ]}
/>