CP Registry

ScrollProgress

Lese-Fortschritts-Indikator als Top-Bar oder Floating-Circle. Misst den Scroll-Fortschritt der gesamten Seite oder eines Ziel-Elements. CSS-only via animation-timeline: scroll() wo verfügbar, sonst JS-Fallback.

Diese Showcase-Seite zeigt eine Live-Bar oben — scrollen Sie, um den Fuell-Effekt zu sehen.

Bar — oben fixiert

Klassischer Lese-Fortschritt für Artikel- und Studienseiten. Ist bereits oben auf dieser Seite aktiv.

Top-Bar in Brand-Farbe

Bereits oben auf dieser Seite aktiv.

<ScrollProgress variant="bar" position="top" tone="primary" />

Floating Circle

Schwebender Kreis unten rechts mit Prozent-Label. Gut für App-artige Layouts.

Floating-Circle mit Prozent

Aktiviert sich beim Scrollen — bitte beachten dass auf dieser Showcase-Seite die Top-Bar bereits aktiv ist. Im echten Einsatz: nur eine Variante pro Seite.

<ScrollProgress variant="circle" tone="accent" showLabel />

Ziel-Element messen

Mit target-Selektor wird der Fortschritt nur innerhalb eines Containers gemessen — z.B. für den Artikel-Inhalt einer Studie.

Fortschritt einer Klimaschutz-Studie

Beispiel-Setup: Die Bar oben misst nur den definierten Article-Container, nicht die ganze Seite.

<ScrollProgress variant="bar" position="top" target="#klimastudie-text" />

<article id="klimastudie-text">
  <h2>Klimaschutzbericht 2025 — 24 Min. Lesezeit</h2>
  ...
</article>

Fuell-Demo — länger Scroll-Inhalt

Die folgenden Blöcke geben Scroll-Distanz, damit der Indikator oben sichtbar füllt.

Abschnitt 1 von 6

Förderprogramme im Bereich Klimaschutz und Mobilität umfassen die Bereiche Solarausbau, Wärmepumpen, Quartiersstrom, Lade-Infrastruktur, Lastenrad-Sharing und kommunale Mobilitaetskonzepte. Die KfW-Bank ist zentrale Förderbank, ergänzt durch BMUV-Bundes- und Landesprogramme.

Antragsfristen, Förderhöhen und Kombinations-Regeln unterscheiden sich pro Programm. Für staedtische Liegenschaften gilt seit 2024 ein vereinfachtes Antragsverfahren mit digitaler Einreichung und reduzierten Nachweis-Pflichten.

Abschnitt 2 von 6

Förderprogramme im Bereich Klimaschutz und Mobilität umfassen die Bereiche Solarausbau, Wärmepumpen, Quartiersstrom, Lade-Infrastruktur, Lastenrad-Sharing und kommunale Mobilitaetskonzepte. Die KfW-Bank ist zentrale Förderbank, ergänzt durch BMUV-Bundes- und Landesprogramme.

Antragsfristen, Förderhöhen und Kombinations-Regeln unterscheiden sich pro Programm. Für staedtische Liegenschaften gilt seit 2024 ein vereinfachtes Antragsverfahren mit digitaler Einreichung und reduzierten Nachweis-Pflichten.

Abschnitt 3 von 6

Förderprogramme im Bereich Klimaschutz und Mobilität umfassen die Bereiche Solarausbau, Wärmepumpen, Quartiersstrom, Lade-Infrastruktur, Lastenrad-Sharing und kommunale Mobilitaetskonzepte. Die KfW-Bank ist zentrale Förderbank, ergänzt durch BMUV-Bundes- und Landesprogramme.

Antragsfristen, Förderhöhen und Kombinations-Regeln unterscheiden sich pro Programm. Für staedtische Liegenschaften gilt seit 2024 ein vereinfachtes Antragsverfahren mit digitaler Einreichung und reduzierten Nachweis-Pflichten.

Abschnitt 4 von 6

Förderprogramme im Bereich Klimaschutz und Mobilität umfassen die Bereiche Solarausbau, Wärmepumpen, Quartiersstrom, Lade-Infrastruktur, Lastenrad-Sharing und kommunale Mobilitaetskonzepte. Die KfW-Bank ist zentrale Förderbank, ergänzt durch BMUV-Bundes- und Landesprogramme.

Antragsfristen, Förderhöhen und Kombinations-Regeln unterscheiden sich pro Programm. Für staedtische Liegenschaften gilt seit 2024 ein vereinfachtes Antragsverfahren mit digitaler Einreichung und reduzierten Nachweis-Pflichten.

Abschnitt 5 von 6

Förderprogramme im Bereich Klimaschutz und Mobilität umfassen die Bereiche Solarausbau, Wärmepumpen, Quartiersstrom, Lade-Infrastruktur, Lastenrad-Sharing und kommunale Mobilitaetskonzepte. Die KfW-Bank ist zentrale Förderbank, ergänzt durch BMUV-Bundes- und Landesprogramme.

Antragsfristen, Förderhöhen und Kombinations-Regeln unterscheiden sich pro Programm. Für staedtische Liegenschaften gilt seit 2024 ein vereinfachtes Antragsverfahren mit digitaler Einreichung und reduzierten Nachweis-Pflichten.

Abschnitt 6 von 6

Förderprogramme im Bereich Klimaschutz und Mobilität umfassen die Bereiche Solarausbau, Wärmepumpen, Quartiersstrom, Lade-Infrastruktur, Lastenrad-Sharing und kommunale Mobilitaetskonzepte. Die KfW-Bank ist zentrale Förderbank, ergänzt durch BMUV-Bundes- und Landesprogramme.

Antragsfristen, Förderhöhen und Kombinations-Regeln unterscheiden sich pro Programm. Für staedtische Liegenschaften gilt seit 2024 ein vereinfachtes Antragsverfahren mit digitaler Einreichung und reduzierten Nachweis-Pflichten.

Redakteurshinweise

Wann einsetzen

  • Lange Article- und Studien-Seiten ab 1500 Worten
  • Klimaschutz-Berichte, Förderbedingungs-Dokumente
  • Multi-Section-Landingpages
  • NICHT auf kurzen Marketingseiten

Inhalts-Empfehlungen

  • Eine Variante pro Seite — entweder Bar oder Circle
  • Bar für Lesetexte, Circle für App-artige Layouts
  • Tone primary als Standard, accent bei Sonderseiten
  • target setzen wenn nur ein Article gemessen werden soll

Mobile & A11y

  • Decorative — aria-hidden="true"
  • Chromium: CSS-only via animation-timeline: scroll() — kein Repaint pro Frame
  • Andere Browser: throttled JS-Fallback mit rAF
  • prefers-reduced-motion: Transitions deaktiviert, Bar bleibt sichtbar

Pitfalls

  • Nicht in Modal-Dialogen — irritiert
  • Bar Position top vs Sticky-Header: testen, ggf. unten
  • Circle nicht über Aktionen platzieren
  • Kein Mehrfach-Indikator auf einer Seite

Installation

cp-components add scroll-progress