loader

Искать шаблоны в нашем каталоге

9 бесплатных Progress Bars (индикаторов загрузки) для Ваших проектов
  • 06.11.2018
  • 495

9 бесплатных Progress Bars (индикаторов загрузки) для Ваших проектов

Индикаторы загрузки или так называемые "Progress Bars" в основном используются во время загрузки страниц, получения ответа от сервера или для обработки действий пользователя, таких как загрузка файлов и т.д.

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


Wordpress Templates И так, поехали!

1. LineProgressbar

LineProgressbar.js

jQuery LineProgressbar это бесплатный плагин, основным преимуществом которого, является его простота и легковесность.

Он легко и гибко настраивается: длина, высота, boder-radius, цвет фона.

Посмотрите это демо с некоторыми примерами кода.

Если вы любите jQuery, возможно этот плагин станет Вашим самым любимым. Очень прост в использовании и поддерживается всеми браузерами, включая IE.


2. MProgress.js

MProgress.js library

Следующим примером, который мне очень нравится является MProgress.js. В основе этого Progress Bar лежит всеми любимый Material Design от Google, поэтому многие примеры Вам будут знакомы.

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

На GitHub repo Вы найдете остальные примеры вместе с инструкциями по установке.

Это пожалуй самый практичный и удобный плагин для повседневной жизни.


3. ProgressBar.js

ProgressBar.js homepage

Наверняка, Вы встречались с индикаторами загрузки страницы, которые "прилеплены" в верхней кромке окна браузера. Обычно используются при динамической загрузке страниц и в последнее время стали очень популярны.

ProgressBar.js это бесплатный плагин, с подобным типом индикатора. Но это далеко не все, что он умеет.

Вы можете применить этот плагин к фигуре любой формы от кругов до параллелепипедов.

Если вы взгляните на главную страницу, найдете все основные примеры кода, с возможностью поиграться с ним в JSFiddle.


4. goalProgress

jQuery Goal Progress

Этот плагин goalProgress pluginсамый простой в исполнении, но это не значит, что он не сможет послужить хорошим инструментом в умелых руках.

На главной странице мало полезной информации, если не считать базовую демонстрацию и форму для поддержки автора.

Основную информацию по настройке и возможностям плагина Вы найдете на GitHub repo.


5. μProgress

jQuery uProgress

Раньше я не сталкивался с μProgress, пока не написал эту статью. Но как оказалось, это лучший бесплатный Progress Bar в свободном доступе на сегодняшний день.

Он был разработан, как индикатор загрузки с акцентом на пользовательскую анимацию. Здесь используется графический процессор компьютера для более быстрого рендеринга.

Более подробно почитать об этом процессе, а так же найти информацию по настройке можно в официальной документации. Это действительно классный проект с готовымAPI для добавления пользовательских функций.

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


6. nanobar.js

Nanobar.js plugin

With nanobar.js - супер маленькая JS-библиотека, построенная на анимации. Занимает 700 байт, что является ее основным преимуществом.

Процесс может быть запущен в рамках одного вызова функции, и будет полезен, когда Вы не используете jQuery и Вам хватает стандартного функционала.


7. progressStep

progressStep plugin

progressStep - еще один прекрасный бесплатный плагин с отличной документацией на GitHub repo.


8. CProgress

CProgress library

CProgress предназначен исключительно для создания круговых "прогресс-баров".

В комплекте идет несколько различных дизайнов и огромное количество функций, например, регулировка скорости. Все, что Вам необходимо знать для работы с этим плагином есть на GitHub repo. Скачать можно там же.


9. jQuery Circle Progress

jQuery Circle Progress plugin

Очередной jQuery плагин.

Но jQuery Circle Progress обладает большим функционалом, по сравнению с конкурентами.

Однако имеет достаточно большой вес, и соответственно подойдет ни к каждому проекту.

Текущая стабильная версия 1.2.2.

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

Надеюсь материал будет полезен для Вас.

До скорых встреч.

Callie HTML шаблон для блога или новостного сайта

Callie HTML шаблон для блога или новостного сайта

Красивый bootstrap шаблон на тему путешествий, здоровья или техно..

0 руб.

Balita — Минималистичный бесплатный HTML шаблон для блога

Balita — Минималистичный бесплатный HTML шаблон для блога

Компактный шаблон со стильным светлым дизайном для Вашего блога..

0 руб.

Похожие статьи

13.10.2018 207

8 оригинальных CSS чекбоксов для формы на Вашем сайте

Чекбоксы (переключатели) могут быть не самыми заметными элементами пользовательского интерфейса в форме, но...

Читать далее...

04.11.2018 681

9 кастомных input type file для Вашего сайта

Как вы знаете, стандартное поле загрузки файла в HTML не стилизуется стандартными методами...

Читать далее...