StatCounter

Animierte KPI-Zahlen, die beim Eintreten in den Viewport von 0 hochzaehlen. Ideal um Klimaergebnisse, Förderzahlen und Mobilitaetsdaten wirkungsvoll zu kommunizieren. Respektiert prefers-reduced-motion.

Klimaergebnisse 2025

Drei Kennzahlen nebeneinander — ein typischer Einsatz im Bericht oder auf der Startseite.

CO₂-Einsparung und Ladesäulen

Mit Trend-Pfeil und optionaler Beschreibung.

12.400 t

t CO₂ eingespart 2025

Gegenüber 2022

187

neue Ladesäulen

Im Stadtgebiet installiert

+34%

mehr Förderanträge

Gegenüber Vorjahr

<div class="auto-grid" data-cols="3">
  <StatCounter
    value={12400}
    label="t CO₂ eingespart 2025"
    suffix=" t"
    trend="down"
    description="Gegenüber 2022"
  />
  <StatCounter
    value={187}
    label="neue Ladesäulen"
    trend="up"
    description="Im Stadtgebiet installiert"
  />
  <StatCounter
    value={34}
    label="mehr Förderanträge"
    prefix="+"
    suffix="%"
    trend="up"
    description="Gegenüber Vorjahr"
  />
</div>

Fördervolumen mit Dezimalstellen

Groessere Zahlen mit Nachkommastellen — z.B. für Millionenbetraege oder Verbrauchs-KPIs.

Fördervolumen und CO₂-Verbrauch

4,2 Mio. €

Mio. Euro Fördervolumen

0,8 kg/km

kg CO₂ pro km gespart

<StatCounter
  value={4.2}
  label="Mio. Euro Fördervolumen"
  suffix=" Mio. €"
  decimals={1}
  trend="up"
/>
<StatCounter
  value={0.8}
  label="kg CO₂ pro km gespart"
  suffix=" kg/km"
  decimals={1}
  trend="down"
/>

Einfache Zahlen ohne Trend

Minimalistische Variante ohne Pfeil — für neutrale Kennzahlen oder reine Fakten.

OePNV-Nutzungszahlen

2.300.000

Fahrgaeste pro Tag

1.450

Haltestellen im Netz

Linien im Verbund

<StatCounter value={2300000} label="Fahrgaeste pro Tag" />
<StatCounter value={1450} label="Haltestellen im Netz" />
<StatCounter value={63} label="Linien im Verbund" />

Redakteurshinweise

Wann einsetzen

Startseiten-Helden-Bereich für Klimabilanz-Highlights
Jahresberichte und Förder-Landingpages
Abschnitte nach Projektbeschreibungen als "Beweis-Zahlen"
Mindestens 3 Counter nebeneinander, nie einzeln

Inhalts-Empfehlungen

Label: 2–5 Wörter, konkrete Einheit nennen
Suffix konsequent verwenden: " t", " kWh", "%", " Mio. €"
Trend-Pfeil nur setzen wenn die Richtung eindeutig positiv/negativ bewertet werden kann
Beschreibung: kurzer Kontext wie "Gegenüber Vorjahr"

Mobile & A11y

Zahl-Schriftgröße passt sich per clamp() an die Container-Breite an
Animation stoppt bei prefers-reduced-motion — Endwert wird sofort angezeigt
Trend-Pfeil ist aria-hidden — Label-Text muss die Information tragen
Niemals nur Farbe als Bedeutungstraeger nutzen

Pitfalls

Keine veralteten Zahlen verwenden — Jahreszahl im Label nennen
Nicht mehr als 5–6 Counter auf einmal zeigen
Sehr große Werte (Millionen) lieber mit Dezimalstelle + "Mio." formatieren
Kein Counter-Block ohne Überschrift oder erklärenden Text drumherum

Installation

cp-components add statcounter