⏳ 4 Najlepsze wtyczki paska postępu dla WordPress 2026 (darmowe i płatne)

Czytelnik otwiera stronę, widzi „płótno" tekstu bez końca i odchodzi. Nie dlatego, że treść jest zła. Mózg potrzebuje widocznego punktu orientacyjnego: ile jeszcze czytać, na jakim jestem etapie. Pasek postępu rozwiązuje ten problem dzięki czystej psychologii percepcji.

Ale wybór wtyczki do konkretnego zadania to osobna historia. Jedna jest stworzona pod paski umiejętności w portfolio, inna pod pełnoekranowy preloader, trzecia udaje blok Gutenberga. Jeśli Państwo pomylą, dostaną rozdęty site-builder w zamian za maleńki pasek.

Poniżej cztery sprawdzone wtyczki WordPress do pasków postępu na rok 2026. Darmowe i płatne, shortcode’owe i blokowe, każda do swojego scenariusza.

💡 Szybki przegląd:

• Proszę określić, gdzie potrzebny jest pasek postępu: wskaźnik czytania, pasek umiejętności, preloader czy blok Gutenberga, od tego zależy wybór wtyczki.
• Do pasków umiejętności i portfolio proszę wybrać Progress Bar & Skill Bar: darmowa, lekka, 34 wzory w wersji Pro.
• Jeśli potrzebny jest wizualny konstruktor z okrągłymi, liniowymi i pionowymi paskami bez wiązania się z shortcode’ami, StichyX Bar z podglądem na żywo i grafiką SVG.
• Dla użytkowników Gutenberga, Ultimate Blocks: pasek postępu jako natywny blok edytora plus 35 innych bloków w zestawie.
• Do preloadera z animowaną planszą powitalną, PageLoader, jednorazowa opłata $26.

Tabela porównawcza wtyczek

1. Progress Bar & Skill Bar

Wtyczka od WpShopMart dla tych, którzy potrzebują „pokazać umiejętności w procentach" bez zbędnych zależności. Instaluje się, aktywuje, generuje shortcode i pasek jest już na stronie. Żadnego edytora blokowego, żadnego interfejsu konstruktora: wchodzą Państwo, konfigurują kolory i procenty, kopiują [PROGRESSBAR_WP id=xx].

W darmowej wersji są dwa wzory: okrągły i liniowy. Oba są animowane, podczas przewijania pasek wypełnia się kolorem od 0 do zadanej wartości. Pod maską siatka Bootstrap, więc responsywność na urządzeniach mobilnych, tabletach i desktopach działa bez dodatkowych ustawień.

Wersja Pro za $8 (Personal, 1 strona) lub $24 (Business, bez limitu) rozszerza bibliotekę do 34 szablonów i dodaje sortowanie elementów metodą drag-and-drop. Jest wykres half-pie, półokrągły, tła sekcyjne, precyzyjne ustawienia czcionek i nieograniczona liczba pasków umiejętności na stronie.

Plusy:

• Darmowa wersja jest w pełni funkcjonalna, bez crippleware.
• Shortcode można wstawić wszędzie: do posta, widżetu, motywu.
• 52 opinie na WordPress.org ze średnią oceną 4,5.
• Oparta na Bootstrapie, nie koliduje z większością motywów.

Minusy:

• Nie była aktualizowana pod ostatnie główne wydania WordPressa (v1.5.0 przetestowana do 6.7.5).
• Darmowa wersja ograniczona do dwóch wzorów.
• Interfejs konfiguracji wygląda na przestarzały.

💵 Darmowa / Pro od $8.

🔗 Pobierz z WordPress.org | 🔗 Wersja Pro

2. StichyX Bar

Jeśli standardowe wzory nie odpowiadają, a nie ma czasu na ręczne kodowanie niestandardowych pasków, StichyX Bar daje wizualny konstruktor z podglądem na żywo bezpośrednio w panelu administracyjnym. Poziomy, pionowy, okrągły SVG: geometrię określa się w minutę, bez ani jednej linii CSS.

Pod maską czysty JavaScript, bez jQuery, bez zewnętrznych bibliotek (oprócz Chart.js do wykresów). Renderowanie SVG zachowuje ostrość na ekranach retina, a ustawienia animacji, od 500 do 5000 ms, pozwalają dostosować zachowanie do rytmu strony. Wyzwalacze: przewijanie, najechanie kursorem lub kliknięcie.

Na osobną wzmiankę zasługuje Group Builder: kilka pasków łączy się w siatkę na 1-3 kolumny i animuje kaskadowo. Do portfolio lub strony „O zespole" gotowa siatka umiejętności bez wtyczki page builder. Emoji i ikony wewnątrz paska są obsługiwane od razu.

Wtyczka jest aktywnie rozwijana: v1.2.3 z czerwca 2026, integracja z Elementorem i Gutenbergiem, wsparcie ACF dla danych dynamicznych. Darmowa, bez komplikacji z Pro.

Plusy:

• Wizualny konstruktor z podglądem na żywo w panelu administracyjnym.
• Trzy geometrie (pozioma, pionowa, okrągła SVG) w jednej wtyczce.
• Group Builder do siatek umiejętności z animacją kaskadową.
• Vanilla JS, nie ładuje jQuery.

Minusy:

• Tylko 10 aktywnych instalacji na WordPress.org, wtyczka jest bardzo nowa.
• Jeden deweloper, brak gwarancji długoterminowego wsparcia.
• Brak preloadera i wskaźnika czytania (tylko paski treści).

💵 Darmowa.

🔗 Pobierz z WordPress.org

3. Ultimate Blocks

Nie jest to zwykła wtyczka pasków postępu, lecz pełny zestaw 36 bloków Gutenberg, z których jednym jest Progress Bar. Instaluje się go jak zwykły blok w edytorze: wybiera się okrąg lub linię, ustawia kolor, grubość, wartość procentową, a pasek animuje się podczas przewijania.

Główną zaletą Ultimate Blocks jest kontekst. Pasek postępu nie jest tu odizolowanym narzędziem, lecz częścią ekosystemu: w tym samym wpisie można dodać Content Toggle (akordeon), Table of Contents, Call to Action, blok Review z mikrodanymi. Żadnych shortcode'ów, wszystko natywnie w Gutenbergu.

Wtyczka jest aktywnie rozwijana: wersja 3.5.7 z czerwca 2026, ponad 50 000 aktywnych instalacji, 728 opinii ze średnią oceną 5 gwiazdek. Darmowa wersja jest hojna: Progress Bar, Content Filter, Star Rating i jeszcze dwa tuziny bloków bez opłat.

Plusy:

• Pełna integracja z Gutenbergiem, nie trzeba uczyć się nowego interfejsu.
• 36 bloków w jednej wtyczce, pasek postępu to tylko jeden z nich.
• Aktywny rozwój (aktualizacja z czerwca 2026).
• Znaczniki Schema w blokach Review i HowTo.

Minusy:

• Pasek postępu nie jest głównym celem, lecz jedną z 36 funkcji.
• Nie nadaje się do tematów nieopartych na Gutenbergu.
• Niektóre bloki (Coupon, Timeline) tylko w wersji Pro.

💵 Bezpłatnie / Wersja Pro.

🔗 Pobierz z WordPress.org

4. PageLoader

PageLoader rozwiązuje pokrewne zadanie: nie jest to wskaźnik czytania ani pasek umiejętności, lecz pełnoekranowy preloader z paskiem postępu. Odwiedzający wchodzi na stronę i widzi planszę z animowanym ładowaniem. Gdy strona jest gotowa, preloader płynnie znika.

W ustawieniach definiuje się timeout lub rzeczywisty procent załadowania, obraz tła (własny lub z biblioteki), ikonę, tekst. Pasek postępu można umieścić w dowolnym miejscu ekranu, skonfigurować kolor i grubość. Wbudowany edytor live pokazuje zmiany w czasie rzeczywistym, nie trzeba przełączać się między panelem administracyjnym a stroną.

Wtyczka jest kompatybilna ze wszystkimi motywami i urządzeniami. Sprzedawana jest na CodeCanyon bez darmowej wersji: płatność jednorazowa, nie subskrypcja.

Plusy:

• Jedyny w zestawieniu pełnoekranowy preloader.
• Edytor live z natychmiastowym podglądem.
• Precyzyjna konfiguracja czasu ładowania.
• Płynne animacje pojawiania się i znikania.

Minusy:

• Tylko wersja płatna (26 USD).
• Nie nadaje się do pasków umiejętności i wskaźników czytania.
• Nie jest aktualizowana przez repozytorium WordPress.org.

💵 26 USD jednorazowo (12 miesięcy wsparcia).

🔗 Strona na CodeCanyon | 🔗 Demo na żywo

Paski postępu to mikro-funkcja i nie ma sensu przepłacać za nią, kupując kreator stron z 50 blokami. Oto trzy zasady wyboru.

Jeśli strona działa na klasycznym edytorze i potrzebne są paski umiejętności, proszę wybrać Progress Bar & Skill Bar. Shortcode [PROGRESSBAR_WP id=xx] wstawia się w dowolny blok tekstowy, widget lub motyw. Darmowa wersja pokrywa 80% zadań, Pro za 8 USD rozszerza możliwości projektowe.

Jeśli potrzebny jest wizualny konstruktor i kilka geometrii bez powiązania z konkretnym edytorem, StichyX Bar z podglądem na żywo i grafiką SVG. Poziome, kołowe i pionowe paski konfiguruje się w panelu administracyjnym w minutę.

Jeśli strona działa na Gutenbergu, a pasek postępu to tylko jedna z potrzeb, proszę zainstalować Ultimate Blocks. Pasek postępu jest w pakiecie ze spisem treści, akordeonem, CTA i blokiem recenzji. Jedna wtyczka zamiast pięciu.

Jeśli potrzebny jest preloader na cały ekran, PageLoader. Jedyne w zestawieniu narzędzie do tworzenia planszy ładowania, z jednorazową płatnością bez subskrypcji.

Na filmie powyżej: proces instalacji i konfiguracji paska postępu w WordPress krok po kroku, od wyboru wtyczki po publikację na stronie.

⁉️🤔 Często zadawane pytania

Czym pasek postępu różni się od preloadera?

Pasek postępu pokazuje procent wewnątrz treści: umiejętność, etap lejka, wskaźnik czytania. Preloader to plansza przed załadowaniem strony: odwiedzający widzi pasek lub animację, podczas gdy strona jest renderowana. PageLoader to preloader; Progress Bar & Skill Bar i StichyX Bar to paski treści.

Czy można dodać pasek postępu bez wtyczki?

Technicznie tak, za pomocą HTML <progress>, animacji CSS i JavaScript. Jednak bez wtyczki tracą Państwo: edytor wizualny, responsywność od razu po wyjęciu z pudełka, łatwe wstawianie przez shortcode lub blok. Dla użytkownika nietechnicznego wtyczka oszczędza 2-3 godziny ręcznego kodowania na każdym pasku.

Która wtyczka jest lepsza do Gutenberga?

Ultimate Blocks, jedyna w zestawieniu z natywnym blokiem Gutenberga. Pasek postępu wstawia się jako blok, ustawienia są w panelu bocznym edytora. Nie trzeba opuszczać interfejsu, kopiować shortcode’ów ani przełączać się do panelu administracyjnego. StichyX Bar również obsługuje blok Gutenberga, ale jego głównym celem jest wizualny konstruktor, a nie ekosystem bloków.

Czy pasek postępu wpływa na szybkość strony?

Dobra wtyczka (Progress Bar & Skill Bar, StichyX Bar) dodaje 2-5 KB CSS i 1-3 KB JS, nie ma to wpływu na LCP. Ultimate Blocks ładuje więcej ze względu na 36 bloków, ale asynchronicznie i tylko te, które są używane. Preloadery (PageLoader) ładują się jako pierwsze i mogą dodać 200-500 ms do FCP, co warto wziąć pod uwagę. Wszystkie cztery wtyczki z zestawienia ładują style asynchronicznie i nie blokują renderowania.

Czy do okrągłych pasków potrzebna jest wersja Pro?

To zależy od wtyczki. Progress Bar & Skill Bar: okrągłe paski tylko w Pro (8 USD). StichyX Bar: okrągłe paski SVG za darmo w wizualnym konstruktorze. Ultimate Blocks: okrągłe i liniowe za darmo w bloku Gutenberga.

💎 Co wybrać w 2026 roku: podsumowanie

Nie ma uniwersalnej odpowiedzi, scenariusz dyktuje wybór.

• Jeśli strona działa na klasycznym edytorze i potrzebne są paski umiejętności, Progress Bar & Skill Bar. 34 projekty w Pro, shortcode bez powiązania z edytorem, oparcie na Bootstrapie.
• Jeśli potrzebnych jest kilka geometrii z podglądem na żywo, StichyX Bar. Wizualny konstruktor, koła SVG, siatki umiejętności i ani jednej linijki CSS.
• Jeśli strona działa na Gutenbergu, Ultimate Blocks. Pasek postępu jako natywny blok plus spis treści, akordeon i CTA w jednej wtyczce.
• Jeśli potrzebna jest plansza ładowania, PageLoader. Jedyna opcja spośród czterech, która obsługuje właśnie preloader, a nie paski treści.

Proszę zacząć od darmowego Progress Bar & Skill Bar: w 5 minut postawią Państwo pierwszy pasek i zrozumieją, czy wystarczą Państwu dwa projekty. A jakiej wtyczki do pasków postępu Państwo używają, proszę napisać w komentarzach.