Читач відкриває сторінку, бачить «полотно» тексту без кінця й краю та йде. Не тому, що контент поганий. Мозку потрібен видимий орієнтир: скільки ще читати, на якому я етапі. Прогрес-бар знімає цю проблему за рахунок чистої психології сприйняття.

Але вибрати плагін під задачу — це окрема історія. Один заточений під скіл-бари в портфоліо, інший, під прелоадер на весь екран, третій маскується під Gutenberg-блок. Помилилися, отримали роздутий site-builder заради крихітної смужки.

Нижче чотири перевірені WordPress-плагіни прогрес-барів на 2026 рік. Безплатні та платні, шорткодні та блочні, кожен під свій сценарій.

💡 Швидкий огляд:

• Визначте, де потрібен прогрес-бар: індикатор читання, скіл-бар, прелоадер або Gutenberg-блок, від цього залежить вибір плагіна.
• Для скіл-барів і портфоліо беріть Progress Bar & Skill Bar: безплатний, легковагий, 34 дизайни в Pro.
• Якщо потрібен візуальний конструктор із круглими, лінійними та вертикальними барами без прив’язки до шорткодів, StichyX Bar із живим прев’ю та SVG-графікою.
• Для Gutenberg-користувачів, Ultimate Blocks: прогрес-бар як рідний блок редактора плюс іще 35 блоків у комплекті.
• Для прелоадера з анімованою заставкою, PageLoader, одноразова оплата $26.

Порівняльна таблиця плагінів

1. Progress Bar & Skill Bar

Плагін від WpShopMart для тих, кому потрібно «показати навички у відсотках» без зайвих залежностей. Встановлюється, активується, генерує шорткод, і смужка вже на сторінці. Жодного блочного редактора, жодного construct-інтерфейсу: зайшли, налаштували кольори та відсотки, скопіювали [PROGRESSBAR_WP id=xx].

У безплатній версії два дизайни: круглий і лінійний. Обидва анімовані, під час скролу смужка заповнюється кольором від 0 до заданого значення. Під капотом Bootstrap-сітка, тому адаптивність на мобільних, планшетах і десктопах працює без додаткових налаштувань.

Pro-версія за $8 (Personal, 1 сайт) або $24 (Business, безліміт) розширює бібліотеку до 34 шаблонів і додає drag-and-drop-сортування елементів. Є half-pie chart, напівкруглий графік, секційні фони, тонке налаштування шрифтів і необмежена кількість скіл-барів на сторінці.

Плюси:

• Безплатна версія повністю робоча, без crippleware.
• Шорткод вставляється куди завгодно: у пост, віджет, тему.
• 52 відгуки на WordPress.org із середньою оцінкою 4,5.
• Bootstrap-основа, не конфліктує з більшістю тем.

Мінуси:

• Не оновлювався під останні мажорні релізи WordPress (v1.5.0 протестована до 6.7.5).
• Безплатна версія обмежена двома дизайнами.
• Інтерфейс налаштування візуально застарів.

💵 Безплатно / Pro від $8.

🔗 Завантажити на WordPress.org | 🔗 Pro-версія

2. StichyX Bar

Якщо стандартні дизайни не влаштовують, а верстати кастомні бари вручну немає часу, StichyX Bar дає візуальний конструктор із живим прев’ю прямо в адмінці. Горизонтальний, вертикальний, круговий SVG: геометрія задається за хвилину, без жодного рядка CSS.

Під капотом чистий JavaScript, ні jQuery, ні сторонніх бібліотек (крім Chart.js для графіків). SVG-рендеринг тримає чіткість на retina-екранах, а налаштування анімації, від 500 до 5000 мс, дає змогу підігнати поведінку під ритм сторінки. Тригери: скрол, ховер або клік.

Окремої згадки заслуговує Group Builder: кілька барів збираються в сітку на 1-3 колонки й анімуються каскадом. Для портфоліо або сторінки «Про команду», готовий скіл-грід без плагіна page builder. Емодзі та іконки всередині бара підтримуються з коробки.

Плагін активно розвивається: v1.2.3 від червня 2026, інтеграція з Elementor і Gutenberg, підтримка ACF для динамічних даних. Безплатно, без Pro-заморочок.

Плюси:

• Візуальний конструктор із живим прев’ю в адмінці.
• Три геометрії (горизонтальна, вертикальна, кругова SVG) в одному плагіні.
• Group Builder для скіл-грідів із каскадною анімацією.
• Vanilla JS, не вантажить jQuery.

Мінуси:

• Усього 10 активних установок на WordPress.org, плагін дуже новий.
• Один розробник, немає гарантії довгострокової підтримки.
• Немає прелоадера та індикатора читання (тільки контентні бари).

💵 Безплатно.

🔗 Завантажити на WordPress.org

3. Ultimate Blocks

Не просто плагін прогрес-барів, а повноцінний набір із 36 блоків Gutenberg, один із яких, Progress Bar. Встановлюється як звичайний блок у редакторі: обрали коло чи лінію, задали колір, товщину, відсотки, і бар анімується під час скролу.

Головна перевага Ultimate Blocks, контекст. Прогрес-бар тут не ізольований інструмент, а частина екосистеми: у тому самому дописі можна додати Content Toggle (акордеон), Table of Contents, Call to Action, блок Review із мікророзміткою. Жодних шорткодів, усе нативно в Gutenberg.

Плагін активно розвивається: v3.5.7 від червня 2026, 50 000+ активних встановлень, 728 відгуків із середньою оцінкою 5 зірок. Безплатна версія щедра: Progress Bar, Content Filter, Star Rating та ще два десятки блоків без оплати.

Плюси:

• Повна інтеграція з Gutenberg, не потрібно вивчати новий інтерфейс.
• 36 блоків в одному плагіні, прогрес-бар, лише один із них.
• Активна розробка (оновлення червень 2026).
• Schema-розмітка в блоках Review та HowTo.

Мінуси:

• Прогрес-бар не основний фокус, а одна з 36 функцій.
• Для тем не на Gutenberg не підходить.
• Деякі блоки (Coupon, Timeline) лише в Pro.

💵 Безплатно / Pro-версія.

🔗 Завантажити на WordPress.org

4. PageLoader

PageLoader вирішує суміжне завдання: не індикатор читання чи скіл-бар, а повноекранний прелоадер з прогрес-баром. Відвідувач заходить на сайт, бачить заставку з анімованим завантаженням. Коли сторінка готова, прелоадер плавно зникає.

У налаштуваннях задається таймаут або реальний відсоток завантаження, фонове зображення (власне чи з бібліотеки), іконка, текст. Прогрес-бар можна розмістити в будь-якому місці екрана, налаштувати колір і товщину. Вбудований live-редактор показує зміни в реальному часі, не потрібно перемикатися між адмінкою та сайтом.

Плагін сумісний з усіма темами та пристроями. Продається на CodeCanyon без безплатної версії: одноразова оплата, не підписка.

Плюси:

• Єдиний у добірці повноекранний прелоадер.
• Live-редактор з миттєвим попереднім переглядом.
• Тонке налаштування таймінгу завантаження.
• Плавні анімації появи та зникнення.

Мінуси:

• Тільки платна версія ($26).
• Не підходить для скіл-барів та індикаторів читання.
• Не оновлюється через репозиторій WordPress.org.

💵 $26 одноразово (12 місяців підтримки).

🔗 Сторінка на CodeCanyon | 🔗 Жива демонстрація

Прогрес-бари — це мікрофіча, і переплачувати за неї site-builder-ом з 50 блоками немає сенсу. Ось три правила вибору.

Якщо сайт на класичному редакторі та потрібні скіл-бари, беріть Progress Bar & Skill Bar. Шорткод [PROGRESSBAR_WP id=xx] вставляється в будь-який текстовий блок, віджет або тему. Безплатна версія закриває 80% задач, Pro за $8 розширює дизайн.

Якщо потрібен візуальний конструктор і кілька геометрій без прив'язки до конкретного редактора, StichyX Bar з живим прев'ю та SVG-графікою. Горизонтальні, кругові та вертикальні бари налаштовуються в адмінці за хвилину.

Якщо сайт на Gutenberg і прогрес-бар, лише одна з потреб, ставте Ultimate Blocks. Прогрес-бар іде в комплекті зі змістом, акордеоном, CTA та Review-блоком. Один плагін замість п'яти.

Якщо потрібен прелоадер на весь екран, PageLoader. Єдиний у добірці інструмент для заставки завантаження, з одноразовою оплатою без підписок.

На відео вище, покроковий процес встановлення та налаштування прогрес-бару в WordPress: від вибору плагіна до публікації на сторінці.

⁉️🤔 Часті запитання

Чим прогрес-бар відрізняється від прелоадера?

Прогрес-бар показує відсоток усередині контенту: навичка, етап воронки, індикатор читання. Прелоадер — це заставка перед завантаженням сайту: відвідувач бачить смужку або анімацію, поки сторінка рендериться. PageLoader — це прелоадер; Progress Bar & Skill Bar і StichyX Bar, контентні бари.

Чи можна поставити прогрес-бар без плагіна?

Технічно так, через HTML <progress>, CSS-анімації та JavaScript. Але без плагіна ви втрачаєте: візуальний редактор, адаптивність із коробки, легке вставлення через шорткод або блок. Для нетехнічного користувача плагін економить 2-3 години ручного верстання на кожному барі.

Який плагін кращий для Gutenberg?

Ultimate Blocks, єдиний у добірці з нативним Gutenberg-блоком. Прогрес-бар вставляється як блок, налаштування в бічній панелі редактора. Не потрібно виходити з інтерфейсу, копіювати шорткоди або перемикатися в адмінку. StichyX Bar теж підтримує Gutenberg-блок, але його фокус, візуальний конструктор, а не екосистема блоків.

Чи впливає прогрес-бар на швидкість сайту?

Якісний плагін (Progress Bar & Skill Bar, StichyX Bar) додає 2-5 КБ CSS і 1-3 КБ JS, на LCP це не впливає. Ultimate Blocks завантажує більше через 36 блоків, але асинхронно і лише ті, що використовуються. Прелоадери (PageLoader) завантажуються першими та можуть додати 200-500 мс до FCP, що варто враховувати. Усі чотири плагіни з добірки асинхронно підвантажують стилі та не блокують рендеринг.

Чи потрібна Pro-версія для круглих барів?

Залежить від плагіна. Progress Bar & Skill Bar: круглі бари тільки в Pro ($8). StichyX Bar: круглі SVG-бари безплатно у візуальному конструкторі. Ultimate Blocks: круглі та лінійні безплатно в Gutenberg-блоці.

💎 Що ставити у 2026 році: підсумковий розклад

Універсальної відповіді немає, сценарій диктує вибір.

• Якщо сайт на класичному редакторі та потрібні скіл-бари, Progress Bar & Skill Bar. 34 дизайни в Pro, шорткод без прив'язки до редактора, Bootstrap-основа.
• Якщо потрібно кілька геометрій з живим прев'ю, StichyX Bar. Візуальний конструктор, SVG-кола, скіл-гріди та жодного рядка CSS.
• Якщо сайт живе на Gutenberg, Ultimate Blocks. Прогрес-бар як рідний блок плюс зміст, акордеон і CTA в одному плагіні.
• Якщо потрібна заставка завантаження, PageLoader. Єдиний варіант серед чотирьох, що закриває саме прелоадер, а не контентні бари.

Почніть із безплатного Progress Bar & Skill Bar: за 5 хвилин поставите перший бар і зрозумієте, чи вистачає вам двох дизайнів. А який плагін прогрес-барів використовуєте ви, напишіть у коментарях.