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
Отвечает: да
О коде
Отзывчивые вертикальные шаги прогресса
Совместимые браузеры: 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
Совместимые браузеры: 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
-* , чтобы обеспечить быстрое обновление индикатора выполнения, анимированного Zepto (или jQuery).
Анимация завернута в функцию window.resize для реанимации при изменении размера браузера.Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: jquery.js
7 лучших плагинов и примеров jQuery Progress Bar 2022
Наши бесплатные темы для WordPress скачаны более 5 МИЛЛИОНОВ раз. Получите их немедленно!
Контент Colorlib бесплатный. Когда вы покупаете по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Узнать больше
- Алекс Ивановс
- Инструменты
Веб-сайты, с которыми мы постоянно взаимодействуем, являются кульминацией различных виджетов, элементов, библиотек, плагинов и элементов кода, которые превращаются в опыт веб-дизайна, с которым мы сталкиваемся. HTML5 и CSS3 являются лидерами в создании такого опыта, и мы даже не до конца осознаем, какие элементы нам потребуются для наших веб-проектов.
Хотя мы можем создавать автономные и статические индикаторы выполнения, используя собственные HTML5 и CSS3, мы можем усилить эффекты наших индикаторов выполнения с помощью JavaScript или, точнее, библиотеки jQuery. С помощью jQuery мы можем оживить наши индикаторы прогресса и загрузки, добавить динамические и интерактивные анимационные эффекты, добавить эффекты обратного отсчета и загрузки, которые оживят наши страницы. Это то, на чем мы сосредоточимся прямо здесь, мы рассмотрим некоторые из лучших плагинов индикатора прогресса и загрузки jQuery, которые были созданы с помощью новейшей доступной технологии CSS3.
Мы рады сообщить, что на этот раз нам не пришлось полагаться на простой сайт для обмена кодами, чтобы собрать все эти библиотеки и плагины.
Вместо этого мы собрали лучшие работы, доступные из множества источников и авторов-разработчиков со всего мира. Пожалуйста, присоединяйтесь к нам в заполнении этого списка, делясь своими любимыми расширениями индикатора выполнения и элементов панели загрузки в разделе комментариев в нижней части этого списка.
1. цельПрогресс
Этот плагин позволяет создавать анимированный индикатор выполнения с помощью jQuery. Просто введите необходимые данные, и плагин рассчитает прогресс вашей цели и анимирует полосу. Например, если вы проводите сбор средств, вы можете продемонстрировать, сколько средств было получено с помощью красивого индикатора выполнения, или вы можете показать, сколько было сделано для конкретного проекта в виде процентов или оставшихся задач. Вы можете указать текст, который будет помещен до и после собранной суммы.
Скачать
2. spin.js
Spin.js, как следует из названия, представляет собой простой вращающийся загрузочный элемент.
Вы можете использовать его для отображения, когда это необходимо для полной загрузки элемента веб-сайта или запроса. Легко настроить в соответствии с вашими требованиями и стандартами.
Скачать
3. Круглый аватар с круглой полосой прогресса
Если вас особенно интересует круглый индикатор выполнения, этот комплект — все, что вам нужно. Это не просто индикатор выполнения jQuery с круглой формой, но и аватар. Как круто это звучит? Вдобавок ко всему, хотя вы знаете, что что-то происходит из-за индикатора выполнения, информация открывается только по щелчку. Перейдите на целевую страницу и попробуйте. Нажмите любую из трех кнопок и посмотрите, что произойдет. Конечно, вы также получаете возможность выполнять дополнительные настройки и улучшения, поэтому вы настраиваете индикатор выполнения точно по своему вкусу.
Загрузить
4. Супер простая полоса прогресса
Это когда вы хотите добавить в свое приложение простой индикатор выполнения jQuery.
Вместо того, чтобы выполнять всю тяжелую работу самостоятельно, вы можете позаимствовать готовое решение и установить его в кратчайшие сроки. Вы также можете испытать эффект этого индикатора выполнения в предварительном просмотре демо-версии в реальном времени и при необходимости улучшить его. При необходимости вы можете отредактировать инструмент и сделать так, чтобы он естественным образом вписывался в ваш проект. Есть варианты, готовые для вас, чтобы действовать и делать свое дело без пота.
Загрузка
5. Отметка прогресса
Progress Checkmark — это индикатор выполнения jQuery с простым поворотом в виде галочки, когда он достигает 100%. Этого можно добиться, вручную нажав на нижнюю полосу, которая одновременно влияет на круглую полосу прогресса. Эта функция может хорошо работать с вашим проектом, если вам нужно что-то еще. Стоит отметить, что вы можете пойти против течения и не использовать настройки по умолчанию. Имея это в виду, измените и настройте галочку прогресса по своему вкусу и продолжайте.
Поиграйте с ним на CodePen и посмотрите, что возможно, не начав с нуля.
Скачать
6. LoadGo
LoadGo — это современная библиотека индикаторов выполнения, которая позволяет вам использовать ваши собственные указанные изображения в качестве индикаторов загрузки для любой ситуации. Используйте комбинацию процентов и цветов или каждый по отдельности, в зависимости от того, что вам нужно для конкретной ситуации. Вы можете вызвать автоматическое отображение полосы загрузки. Вы также можете активировать динамическое действие, при котором вы можете закрыть изображение в переходе анимации панели загрузки.
Скачать
7. ProgressBar.js
ProgressBar.js использует анимацию SVG, чтобы обеспечить работу индикатора выполнения, который сделает заявление. Вы можете использовать его для создания эффектов панели загрузки для загрузки файлов, проверки форм (например, надежности пароля) или просто использовать его в выполняемом запросе на странице.