⏳ 4 Beste Fortschrittsbalken-Plugins für WordPress 2026 (kostenlos und kostenpflichtig)

Ein Leser öffnet eine Seite, sieht eine endlose Textwand und verlässt sie wieder. Nicht, weil der Inhalt schlecht wäre. Das Gehirn braucht einen sichtbaren Bezugspunkt: Wie viel muss ich noch lesen, wo stehe ich gerade im Prozess. Eine Fortschrittsanzeige löst dieses Problem durch reine Wahrnehmungspsychologie.

Doch die Wahl des passenden Plugins für diese Aufgabe ist eine eigene Geschichte. Eines ist für Fähigkeitsbalken in Portfolios konzipiert, ein anderes für einen Vollbild-Preloader, ein drittes tarnt sich als Gutenberg-Block. Greifen Sie daneben, erhalten Sie einen aufgeblähten Website-Baukasten für einen winzigen Streifen.

Nachfolgend finden Sie vier bewährte WordPress-Fortschrittsbalken-Plugins für 2026. Kostenlos und kostenpflichtig, Shortcode-basiert und Block-basiert, jedes für sein eigenes Szenario.

💡 Kurzüberblick:

• Legen Sie fest, wo Sie eine Fortschrittsanzeige benötigen: Leseindikator, Fähigkeitsbalken, Preloader oder Gutenberg-Block, davon hängt die Wahl des Plugins ab.
• Für Fähigkeitsbalken und Portfolios greifen Sie zu Progress Bar & Skill Bar: kostenlos, leichtgewichtig, 34 Designs in der Pro-Version.
• Wenn Sie einen visuellen Builder mit kreisförmigen, linearen und vertikalen Balken ohne Shortcode-Abhängigkeit benötigen, wählen Sie StichyX Bar mit Live-Vorschau und SVG-Grafiken.
• Für Gutenberg-Nutzer: Ultimate Blocks, Fortschrittsbalken als nativer Editor-Block plus über 35 weitere Blöcke im Paket.
• Für einen Preloader mit animiertem Splash-Screen: PageLoader, Einmalzahlung 26 $.

Plugin-Vergleichstabelle

1. Progress Bar & Skill Bar

Ein Plugin von WpShopMart für alle, die „Fähigkeiten in Prozent anzeigen" möchten, ohne zusätzliche Abhängigkeiten. Installieren, aktivieren, einen Shortcode generieren, und der Balken ist bereits auf der Seite. Kein Block-Editor, keine Konstruktionsoberfläche: Sie gehen hinein, richten Farben und Prozentwerte ein, kopieren [PROGRESSBAR_WP id=xx].

Die kostenlose Version bietet zwei Designs: kreisförmig und linear. Beide sind animiert, der Balken füllt sich beim Scrollen von 0 bis zum angegebenen Wert mit Farbe. Unter der Haube arbeitet ein Bootstrap-Grid, sodass die Darstellung auf Mobilgeräten, Tablets und Desktops ohne zusätzliche Einrichtung funktioniert.

Die Pro-Version für 8 $ (Personal, 1 Website) oder 24 $ (Business, unbegrenzt) erweitert die Bibliothek auf 34 Vorlagen und fügt Drag-and-Drop-Sortierung der Elemente hinzu. Es gibt ein Halbkreisdiagramm, eine halbkreisförmige Grafik, abschnittsweise Hintergründe, fein abgestimmte Schriftarten und unbegrenzt viele Fähigkeitsbalken pro Seite.

Vorteile:

• Kostenlose Version ist voll funktionsfähig, keine abgespeckte Ware.
• Shortcode lässt sich überall einfügen: in einem Beitrag, Widget, Theme.
• 52 Bewertungen auf WordPress.org mit einer Durchschnittsbewertung von 4,5.
• Bootstrap-basiert, verursacht keine Konflikte mit den meisten Themes.

Nachteile:

• Nicht für die letzten großen WordPress-Versionen aktualisiert (v1.5.0 getestet bis 6.7.5).
• Kostenlose Version auf zwei Designs beschränkt.
• Einstellungsoberfläche wirkt optisch veraltet.

💵 Kostenlos / Pro ab 8 $.

🔗 Download auf WordPress.org | 🔗 Pro-Version

2. StichyX Bar

Wenn Standarddesigns nicht passen und Sie keine Zeit haben, benutzerdefinierte Balken manuell zu programmieren, bietet Ihnen StichyX Bar einen visuellen Builder mit Live-Vorschau direkt im Admin-Panel. Horizontal, vertikal, kreisförmiges SVG: Die Geometrie ist in einer Minute festgelegt, ohne eine einzige Zeile CSS.

Unter der Haube arbeitet reines JavaScript, kein jQuery, keine Drittanbieter-Bibliotheken (außer Chart.js für Diagramme). Die SVG-Darstellung bewahrt die Schärfe auf Retina-Bildschirmen, und die Animationseinstellungen von 500 bis 5000 ms erlauben es, das Verhalten an den Rhythmus der Seite anzupassen. Auslöser: Scrollen, Hovern oder Klick.

Der Gruppen-Builder verdient besondere Erwähnung: Mehrere Balken werden zu einem 1-3-spaltigen Raster zusammengefügt und kaskadierend animiert. Für eine Portfolio- oder „Über das Team"-Seite ein fertiges Fähigkeitsraster ohne ein Page-Builder-Plugin. Emojis und Icons innerhalb des Balkens werden standardmäßig unterstützt.

Das Plugin wird aktiv entwickelt: v1.2.3 vom Juni 2026, Integration mit Elementor und Gutenberg, ACF-Unterstützung für dynamische Daten. Kostenlos, ohne Pro-Komplikationen.

Vorteile:

• Visueller Builder mit Live-Vorschau im Admin-Panel.
• Drei Geometrien (horizontal, vertikal, kreisförmiges SVG) in einem Plugin.
• Gruppen-Builder für Fähigkeitsraster mit Kaskadenanimation.
• Vanilla JS, lädt kein jQuery.

Nachteile:

• Nur 10 aktive Installationen auf WordPress.org, das Plugin ist sehr neu.
• Ein einzelner Entwickler, keine Garantie für langfristigen Support.
• Kein Preloader und Leseindikator (ausschließlich Inhaltsbalken).

💵 Kostenlos.

🔗 Download auf WordPress.org

3. Ultimate Blocks

Es handelt sich nicht nur um ein Plugin für Fortschrittsbalken, sondern um ein vollständiges Set von 36 Gutenberg-Blöcken, von denen einer der Fortschrittsbalken ist. Es wird als ganz normaler Block im Editor installiert: Sie wählen Kreis oder Linie, legen Farbe, Stärke und Prozentwerte fest, und der Balken animiert sich beim Scrollen.

Der Hauptvorteil von Ultimate Blocks ist der Kontext. Der Fortschrittsbalken ist hier kein isoliertes Werkzeug, sondern Teil eines Ökosystems: Im selben Beitrag können Sie einen Content Toggle (Akkordeon), ein Inhaltsverzeichnis, einen Call-to-Action und einen Review-Block mit Schema-Markup hinzufügen. Keine Shortcodes, alles funktioniert nativ in Gutenberg.

Das Plugin wird aktiv weiterentwickelt: Version 3.5.7 vom Juni 2026, über 50.000 aktive Installationen, 728 Bewertungen mit einer Durchschnittsnote von 5 Sternen. Die kostenlose Version ist großzügig ausgestattet: Fortschrittsbalken, Content Filter, Star Rating und gut zwei Dutzend weitere Blöcke ohne Bezahlung.

Vorteile:

• Vollständige Gutenberg-Integration, Sie müssen keine neue Oberfläche erlernen.
• 36 Blöcke in einem Plugin, der Fortschrittsbalken ist nur einer davon.
• Aktive Entwicklung (Update Juni 2026).
• Schema-Markup in den Review- und HowTo-Blöcken.

Nachteile:

• Der Fortschrittsbalken steht nicht im Hauptfokus, sondern ist eine von 36 Funktionen.
• Nicht geeignet für Themes ohne Gutenberg.
• Einige Blöcke (Coupon, Timeline) nur in der Pro-Version.

💵 Kostenlose / Pro-Version.

🔗 Download auf WordPress.org

4. PageLoader

PageLoader löst eine angrenzende Aufgabe: kein Leseindikator oder Skill-Balken, sondern ein vollflächiger Preloader mit Fortschrittsbalken. Ein Besucher kommt auf die Seite, sieht einen Splash-Screen mit animiertem Ladevorgang. Wenn die Seite bereit ist, blendet sich der Preloader sanft aus.

In den Einstellungen legen Sie ein Timeout oder einen echten Ladefortschritt, ein Hintergrundbild (eigenes oder aus der Bibliothek), Icon und Text fest. Der Fortschrittsbalken lässt sich beliebig auf dem Bildschirm platzieren, Farbe und Stärke anpassen. Der integrierte Live-Editor zeigt Änderungen in Echtzeit, ohne Wechsel zwischen Admin-Panel und Website.

Das Plugin ist mit allen Themes und Geräten kompatibel. Vertrieben auf CodeCanyon ohne Gratisversion: Einmalzahlung, kein Abo.

Vorteile:

• Der einzige vollflächige Preloader in der Auswahl.
• Live-Editor mit sofortiger Vorschau.
• Feineinstellung des Lade-Timings.
• Sanfte Ein- und Ausblendanimationen.

Nachteile:

• Ausschließlich kostenpflichtig (26 $).
• Nicht geeignet für Skill-Balken und Leseindikatoren.
• Keine Aktualisierung über das WordPress.org-Repository.

💵 26 $ einmalig (12 Monate Support).

🔗 Seite auf CodeCanyon | 🔗 Live-Demo

Fortschrittsbalken sind ein Mikro-Feature, und es lohnt sich nicht, dafür mit einem Site-Builder mit 50 Blöcken zu viel zu bezahlen. Hier drei Auswahlregeln.

Läuft die Seite mit dem klassischen Editor und benötigen Sie Skill-Balken, greifen Sie zu Progress Bar & Skill Bar. Der Shortcode [PROGRESSBAR_WP id=xx] fügt sich in jeden Textblock, jedes Widget oder Theme ein. Die Gratisversion deckt 80% der Aufgaben ab, Pro für 8 $ erweitert das Design.

Brauchen Sie einen visuellen Builder und mehrere Geometrien ohne Bindung an einen bestimmten Editor, StichyX Bar mit Live-Vorschau und SVG-Grafiken. Horizontale, kreisförmige und vertikale Balken sind im Admin-Panel in einer Minute eingerichtet.

Läuft die Seite auf Gutenberg und ist der Fortschrittsbalken nur eines der Bedürfnisse, installieren Sie Ultimate Blocks. Der Fortschrittsbalken kommt mit Inhaltsverzeichnis, Akkordeon, CTA- und Review-Block. Ein Plugin statt fünf.

Benötigen Sie einen vollflächigen Preloader, PageLoader. Das einzige Werkzeug in der Auswahl für einen Lade-Splash-Screen, mit Einmalzahlung ohne Abos.

Im Video oben sehen Sie den schrittweisen Ablauf der Installation und Einrichtung eines Fortschrittsbalkens in WordPress: von der Plugin-Auswahl bis zur Veröffentlichung auf einer Seite.

⁉️🤔 Häufig gestellte Fragen

Wie unterscheidet sich ein Fortschrittsbalken von einem Preloader?

Ein Fortschrittsbalken zeigt einen Prozentwert innerhalb von Inhalten an: Skill, Trichterstufe, Leseindikator. Ein Preloader ist ein Splash-Screen vor dem Laden der Seite: Der Besucher sieht einen Balken oder eine Animation, während die Seite rendert. PageLoader ist ein Preloader; Progress Bar & Skill Bar und StichyX Bar sind Inhaltsbalken.

Kann ich einen Fortschrittsbalken ohne Plugin installieren?

Technisch ja, über HTML <progress>, CSS-Animationen und JavaScript. Aber ohne Plugin verlieren Sie: visuellen Editor, sofortige Responsivität, einfaches Einfügen per Shortcode oder Block. Für einen nicht technischen Anwender spart ein Plugin 2-3 Stunden manuelles Coden pro Balken.

Welches Plugin eignet sich besser für Gutenberg?

Ultimate Blocks, das einzige in der Auswahl mit einem nativen Gutenberg-Block. Der Fortschrittsbalken wird als Block eingefügt, Einstellungen in der Editor-Seitenleiste. Kein Verlassen der Oberfläche, kein Kopieren von Shortcodes, kein Wechsel ins Admin-Panel nötig. StichyX Bar unterstützt ebenfalls einen Gutenberg-Block, sein Fokus liegt jedoch auf einem visuellen Builder, nicht auf einem Block-Ökosystem.

Beeinflusst ein Fortschrittsbalken die Seiten-Geschwindigkeit?

Ein hochwertiges Plugin (Progress Bar & Skill Bar, StichyX Bar) fügt 2-5 KB CSS und 1-3 KB JS hinzu, das wirkt sich nicht auf den LCP aus. Ultimate Blocks lädt aufgrund von 36 Blöcken mehr, jedoch asynchron und nur die verwendeten. Preloader (PageLoader) laden zuerst und können 200-500 ms zum FCP hinzufügen, das sollte man bedenken. Alle vier Plugins in der Auswahl laden Styles asynchron und blockieren das Rendering nicht.

Braucht man eine Pro-Version für kreisförmige Balken?

Hängt vom Plugin ab. Progress Bar & Skill Bar: kreisförmige Balken nur in Pro (8 $). StichyX Bar: kreisförmige SVG-Balken kostenlos im visuellen Builder. Ultimate Blocks: kreisförmig und linear kostenlos im Gutenberg-Block.

💎 Was 2026 installieren: abschließende Aufschlüsselung

Eine universelle Antwort gibt es nicht, das Szenario bestimmt die Wahl.

• Läuft die Seite mit dem klassischen Editor und benötigen Sie Skill-Balken, Progress Bar & Skill Bar. 34 Designs in Pro, Shortcode ohne Editor-Abhängigkeit, Bootstrap-basiert.
• Brauchen Sie mehrere Geometrien mit Live-Vorschau, StichyX Bar. Visueller Builder, SVG-Kreise, Skill-Grids und keine Zeile CSS.
• Lebt die Seite auf Gutenberg, Ultimate Blocks. Fortschrittsbalken als nativer Block plus Inhaltsverzeichnis, Akkordeon und CTA in einem Plugin.
• Benötigen Sie einen Lade-Splash-Screen, PageLoader. Die einzige Option unter den vieren, die speziell einen Preloader abdeckt, keine Inhaltsbalken.

Starten Sie mit dem kostenlosen Progress Bar & Skill Bar: In 5 Minuten installieren Sie den ersten Balken und verstehen, ob zwei Designs für Sie ausreichen. Und welches Fortschrittsbalken-Plugin nutzen Sie, schreiben Sie es in die Kommentare.