22 бесплатных jQuery CSS3 плагина прогресс-баров

Готовые прогресс-бары на jQuery экономят часы разработки и упрощают визуальный контроль действий пользователя. В подборке - скрипты для загрузок, форм, медиа, подсчёта целей и динамичных уведомлений, которые можно встроить в интерфейс за минуты.

В статье представлены десятки бесплатных решений: от тонких индикаторов до круговых шкал, минималистичных панелей и стилизуемых вариантов с темами. Вы сможете быстро выбрать подходящий плагин и интегрировать его в проект, улучшив UX без сложной верстки и тяжёлых библиотек.

Обновлено: 2023-04-20 07:06:57 Сергей Бензенкоавтор материала

Checkout Progress Bar

Адаптивный CSS прогресс-бар с красивым интерфейсом пяти шагов оплаты и подписки.

Скачать

Pixel Progress Bar

Небольшой декоративный индикатор в виде квадратных пикселей на конце полосы прогресса делает этот прогресс-бар визуально гораздо более привлекательным.

Скачать

Pace - автоматический прогресс-бар загрузки страницы

Автоматический прогресс бар веб-страницы. Включите pace.js и тему по своему выбору в свою страницу, и все готово! Pace будет автоматически отслеживать Ajax запросы, задержку цикла событий, состояние готовности документа и элементы на странице, чтобы уведомлять о прогрессе выполнения задачи.

Демо|Скачать

Кнопки со встроенными счетчиками прогресса

Они идеально подходят для отображения прогресса выполнения задачи при выводе формы или загрузке контента через AJAX. Они также могут использовать стили и переходы CSS3, что делает их простыми в настройке.

Демо|Скачать

Animated Goal Progress Bar jQuery plugin

Этот плагин позволяет создавать анимированные прогресс-бары на основе JQuery. Просто заполните необходимые данные, и плагин сам вычислит прогресс выполнения задачи и задаст соответствующую анимацию панели. Вы можете указать текст, который будет выводиться перед и после достижения определенного процента выполнения задачи.

Демо|Скачать

Бесплатные стили кнопок прогресса

Набор плоских и 3D стилей кнопок прогресса, где сама кнопка служит индикатором прогресса. 3D-стили используются для отображения прогресса задачи на одной стороне при вращении кнопки.

Демо|Скачать

ProgressJs - библиотека прогресс-баров с задаваемыми темами

ProgressJs - это библиотека на основе JavaScript и CSS3, которая помогает разработчикам создавать и управлять прогресс-барами для каждого объекта на странице.

Демо|Скачать

ngProgress - прогресс-бар в стиле Youtube

ngProgress - используется для вывода статуса загрузки чего-либо. Данный элемент может использоваться для индикации извлечения данных с внешних ресурсов, если выполнение занимает больше времени, чем обычно или при простой загрузке страниц. Преимущественно применятся для вывода статуса загрузки больших по объему файлов.

Демо|Скачать

Прогресс-бар на чистом CSS

Данный прогресс-бар полностью реализован с помощью градиентов, теней и границ-радиусов CSS3 с примесью анимации. Целью данного проекта является демонстрация возможностей CSS3 в современных веб-браузерах. Поэтому стили этого прогресс-бара задаются исключительно с помощью CSS.

Демо|Скачать

NProgress - тонкий прогресс-бар

«Наноскопический» прогресс-бар. С помощью реалистичных эффектов анимации, вы показываете пользователям, что выполняется какая-то задача! Вдохновение автора черпали в среде Google, YouTube.

Скачать

Circular Progress

Круговой JavaScript-виджет прогресса, очень прост в реализации и настройке.

Скачать

Nanobar.js

Очень, очень компактный прогресс-бар (архив размером всего 730 байт). Не требует установки JQuery.

Демо|Скачать

Angular-loading-bar

Идея проста: добавлять прогресс-бар загрузки всякий раз, когда выполняется XHR-запрос. Несколько запросов, выполняемых одновременно, могут собираться в одной панели таким образом, что каждый ответ соответственно увеличивает прогресс-бар.

Демо|Скачать

Free jQuery Percentage Loader

jQuery.PercentageLoader - это JQuery-плагин для визуализации более привлекательного прогресс-бара, чем обычный горизонтальный индикатор и текстовый счетчик. Плагин прост в установке и довольно гибок в использовании. Он использует холсты HTML5, что позволяет создавать впечатляющее графическое представление, используя для этого всего лишь 10-килобитный (минимизированный) Javascript-файл (с приложением веб-шрифтов опционально).

Плагин использует векторы, а не изображения, что позволяет легко разворачивать различные элементы простым редактированием начальных параметров.

Демо|Скачать

Free Circular Progress Bar - JQuery-плагин

Circular Progress Bar предоставляет неограниченные возможности для индикации потоков выгрузки или загрузки данных.

Демо / Скачать

Простой бесплатный JQuery CSS3 прогресс-бар

Этот прогресс-бар использует атрибут HTML5 custom data-*, что позволяет просто дополнять анимацией прогресс-бар с помощью Zepto (или JQuery). Анимация упаковывается в функцию window.resize, чтобы запускать ее снова, если размер окна браузера изменяется.

Демо|Скачать

CSS 5 steps progress bar

5-этапный CSS прогресс-бар. JS используется только для анимации демо-версии.

Демо|Скачать

JQuery прогресс-бар для заполнения профиля

Использует элементы прогресса выполнения при заполнении профиля. Добавляет соответствующие кнопки для отображения заполнения всех необходимых данных; пользователь может нажимать кнопки "Сохранить", "Далее" при выполнении соответствующих действий.

Демо|Скачать

jQuery Image Preloader Progress Bar

Прогресс-бар со сменными скинами, отображающий прогресс завершения загрузки в процентах.

Демо|Скачать

jQuery Form Progress Bar

Простой прогресс-бар для заполнения форм. Использует элементы Dribbble.

Демо|Скачать

Free YouTube Progress Bar

Прогресс-бар, выводимый в процессе одной единственной сессии браузера, я полагаю, что это пока только A/B тестирование.

Демо|Скачать

Flat Pie Charts and Progress Bars Templates (стоимость: $6)

Анимированный плоский прогресс-бар с круговыми диаграммами. Может быть использован для добавления на ваш сайт инфографики, проектов Adobe Muse или интерактивных книг. Вы можете легко редактировать шрифты, цвета и значения. Файлы можно редактировать в Adobe Edge CC.

Видео демо|Скачать

Сергей Бензенкоавтор-переводчик статьи «22 Free jQuery CSS3 Progress Bar Plugins»