20 индикаторов выполнения jQuery
Коллекция бесплатных примеров кода индикатора выполнения jQuery из Codepen, Github и других ресурсов. Обновление коллекции марта 2021 года. 3 новых предмета.
- Индикаторы выполнения CSS
- Индикаторы выполнения Bootstrap
- Индикаторы выполнения JavaScript
- Индикаторы выполнения React
- Индикаторы прогресса попутного ветра
- Индикаторы выполнения Vue
С код
Пользовательский индикатор выполнения CSS3 и jQuery
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Индикатор выполнения прокрутки
Горизонтальная и вертикальная версии.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Шкала прогресса пчелы
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Вернуться к началу с индикатором выполнения
Ответ: да
Зависимости: unicons.
css
О коде
ПроБар
Этот сценарий позволит вам настроить индикатор выполнения с таймером и другими параметрами.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Отметка прогресса
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: jquery.js
О коде
Курсор с индикатором выполнения
Индикатор прогресса для курсора при прокрутке в jQuery.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: bootstrap.css, jquery.js
О коде
Полоса прогресса круга
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Круг Прогресс
Отзывчивый, доступный, анимированный, стильный с круглым индикатором выполнения CSS, доступный в виде простого (ванильного) плагина JS и jQuery.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: —
О коде
Отзывчивые вертикальные шаги прогресса
Ответ: да
Зависимости: jquery.js
О коде
Радиальные индикаторы прогресса
Прокрутка каждого svg в окне активирует индикатор выполнения.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: jquery.js
О коде
Полоса прогресса с закруглением
Индикатор выполнения, который охватывает внешнюю часть всего окна, а не только его верхнюю часть.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: jquery.js
О коде
Мяч прогресса
Индикатор выполнения в jQuery.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: jquery.js
О коде
Индикатор выполнения шага
Элемент пользовательского интерфейса для информирования пользователей о том, на каком этапе процесса они находятся.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css, jquery.js
О коде
Жидкие пузырьки Progress Bar
Настраиваемый и тематический индикатор выполнения в форме пузыря, внутри которого постоянно плещется вода. В этой демонстрации представлены 3 цвета: красный, оранжевый и зеленый, в зависимости от процента, и текстовое поле для плавного изменения значения.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: jquery.js
О коде
Отзывчивый прогресс перезагружен
Эта версия для мобильных устройств имеет минимальный JavaScript благодаря хитрости nth-child .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Индикатор выполнения чтения
Демонстрация, показывающая прогресс чтения при прокрутке страницы.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: jquery.js
О коде
Плоский прогресс-бар
Плоский радиальный индикатор выполнения (круговая диаграмма) с небольшим количеством jQuery.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: jquery.js
О коде
Круглая полоса прогресса
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: jquery.js
О коде
Super Simple Progress Bar
Этот индикатор выполнения использует пользовательские данные HTML5 -* , чтобы обеспечить быстрое обновление индикатора выполнения, анимированного Zepto (или jQuery).
window.resize для реанимации при изменении размера браузера.Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: jquery.js
7 лучших плагинов и примеров jQuery Progress Bar 2023
Наши бесплатные темы для WordPress скачаны более 5 МИЛЛИОНОВ раз. Получите их немедленно!
Контент Colorlib бесплатный. Когда вы покупаете по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Узнать больше
- Алексей Иванов
- Инструменты
Веб-сайты, с которыми мы постоянно взаимодействуем, являются кульминацией различных виджетов, элементов, библиотек, плагинов и элементов кода, которые превращаются в опыт веб-дизайна, с которым мы сталкиваемся. HTML5 и CSS3 являются лидерами в создании такого опыта, и мы даже не до конца осознаем, какие элементы нам потребуются для наших веб-проектов.
Индикаторы прогресса — это один из таких элементов, который обычно используется в нишевой среде для сайтов и платформ, которые имеют дело с модулями ценообразования, отображая прогресс таких вещей, как достижения навыков и многое другое. Индикаторы выполнения добавляют интерактивности нашим страницам, которых раньше не было.
Хотя мы можем создавать автономные и статические индикаторы выполнения, используя собственные HTML5 и CSS3, мы можем усилить эффекты наших индикаторов выполнения с помощью JavaScript или, точнее, библиотеки jQuery. С помощью jQuery мы можем оживить наши индикаторы прогресса и загрузки, добавить динамические и интерактивные анимационные эффекты, добавить эффекты обратного отсчета и загрузки, которые оживят наши страницы. Это то, на чем мы сосредоточимся прямо здесь, мы рассмотрим некоторые из лучших плагинов индикатора прогресса и загрузки jQuery, которые были созданы с помощью новейшей доступной технологии CSS3.
Мы рады сообщить, что на этот раз нам не пришлось полагаться на простой сайт для обмена кодами, чтобы собрать все эти библиотеки и плагины.
Вместо этого мы собрали лучшие работы, доступные из множества источников и авторов-разработчиков со всего мира. Пожалуйста, присоединяйтесь к нам в заполнении этого списка, делясь своими любимыми расширениями индикатора выполнения и элементов панели загрузки в разделе комментариев в нижней части этого списка.
1. targetProgress
Этот плагин позволяет создавать анимированный индикатор выполнения с помощью jQuery. Просто введите необходимые данные, и плагин рассчитает прогресс вашей цели и анимирует полосу. Например, если вы проводите сбор средств, вы можете продемонстрировать, сколько средств было получено с помощью красивого индикатора выполнения, или вы можете показать, сколько было сделано для конкретного проекта в виде процентов или оставшихся задач. Вы можете указать текст, который будет помещен до и после собранной суммы.
Загрузить2. spin.js
Spin.js, как следует из названия, представляет собой простой вращающийся загрузочный элемент. Вы можете использовать его для отображения, когда это необходимо для полной загрузки элемента веб-сайта или запроса.
Легко настроить в соответствии с вашими требованиями и стандартами.
3. Круглый аватар с круглой полосой прогресса
Если вас особенно интересует круглая полоса прогресса, этот комплект — все, что вам нужно. Это не просто индикатор выполнения jQuery с круглой формой, но и аватар. Как круто это звучит? Вдобавок ко всему, хотя вы знаете, что что-то происходит из-за индикатора выполнения, информация открывается только по щелчку. Перейдите на целевую страницу и попробуйте. Нажмите любую из трех кнопок и посмотрите, что произойдет. Конечно, вы также получаете возможность выполнять дополнительные настройки и улучшения, поэтому вы настраиваете индикатор выполнения точно по своему вкусу.
Загрузить4. Суперпростой индикатор выполнения
Это когда вы хотите добавить в свое приложение простой индикатор выполнения jQuery. Вместо того, чтобы выполнять всю тяжелую работу самостоятельно, вы можете позаимствовать готовое решение и установить его в кратчайшие сроки.
Вы также можете испытать эффект этого индикатора выполнения в предварительном просмотре демо-версии в реальном времени и при необходимости улучшить его. При необходимости вы можете отредактировать инструмент и сделать так, чтобы он естественным образом вписывался в ваш проект. Есть варианты, готовые для вас, чтобы действовать и делать свое дело без пота.
5. Отметка прогресса
Отметка прогресса — это индикатор выполнения jQuery с простым поворотом в виде галочки, когда он достигает 100%. Этого можно добиться, вручную нажав на нижнюю полосу, которая одновременно влияет на круглую полосу прогресса. Эта функция может хорошо работать с вашим проектом, если вам нужно что-то еще. Стоит отметить, что вы можете пойти против течения и не использовать настройки по умолчанию. Имея это в виду, измените и настройте галочку прогресса по своему вкусу и продолжайте. Поиграйте с ним на CodePen и посмотрите, что возможно, не начав с нуля.
Загрузить6. LoadGo
LoadGo — это современная библиотека индикаторов выполнения, которая позволяет вам использовать ваши собственные указанные изображения в качестве индикаторов загрузки в любой ситуации.
Используйте комбинацию процентов и цветов или каждый по отдельности, в зависимости от того, что вам нужно для конкретной ситуации. Вы можете вызвать автоматическое отображение полосы загрузки. Вы также можете активировать динамическое действие, при котором вы можете закрыть изображение в переходе анимации панели загрузки.
7. ProgressBar.js
ProgressBar.js использует анимацию SVG, чтобы обеспечить работу индикатора выполнения, который сделает заявление. Вы можете использовать его для создания эффектов полосы загрузки для загрузки файлов, проверки форм (например, надежности пароля) или просто использовать его в выполняемом запросе на странице.
Была ли эта статья полезной?
Да Нет
Алекс Ивановс
Алекс — независимый писатель с более чем 10-летним опытом работы в области дизайна, разработки и малого бизнеса. Его работы были представлены в таких изданиях, как Entrepreneur, Huffington Post, TheNextWeb и других.