Создание пользовательских адаптивных индикаторов прогресса с ProgressBar.js

Индикаторы прогресса широко известны большинству пользователей в Интернете. Для разработчиков это часто сложный процесс создания индикатора с нуля. Но с ProgressBar.js Вам не нужно!

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

Читайте также: Создание и стилизация индикатора выполнения с помощью HTML5

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

По умолчанию вы можете использовать простую панель или выбрать несколько основных фигур, таких как:

Одна линия
Полукруг
Полный круг
Квадрат
Треугольник

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

Библиотека работает на Пути SVG, поэтому, если вы можете построить контурную фигуру, используя разметку SVG, вы можете анимировать ее с помощью этой библиотеки индикатора выполнения.

Анимации могут также включать текст или иметь собственные шаблоны запуска / остановки. полный API имеет больше деталей с опциями / обратными вызовами, которые вы можете просмотреть на досуге.

ProgressBar.js также имеет небольшой инструкция по установке где вы можете скачать и настроить скрипт, используя Bower, npm или более упрощенный Страница GitHub,

И если вы делаете что-то классное, вы можете отправить свой код в репозиторий GitHub. Создатель проекта Киммо Брунфельдт имеет открыть выпуск GitHub где вы можете представить индивидуальные проекты для включения в библиотеку.

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

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

Чтобы увидеть больше примеров, проверьте Домашняя страница ProgressBar.js или взглянуть на эта скрипка демонстрация анимации сердца

Читайте также: Использование и стилизация HTML5-метра [Guide]