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

Но выбрать плагин под задачу, отдельная история. Один заточен под скилл-бары в портфолио, другой, под прелоадер на весь экран, третий маскируется под 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 минут поставите первый бар и поймёте, хватает ли вам двух дизайнов. А какой плагин прогресс-баров используете вы, напишите в комментариях.