Создание пользовательских адаптивных индикаторов прогресса с ProgressBar.js
Прогресс-бары широко известны большинству пользователей в сети. Для разработчиков это часто сложный процесс создать индикатор с нуля. Но с ProgressBar.js тебе не нужно!
Эта бесплатная библиотека с открытым исходным кодом не имеет зависимостей а также поддерживает все основные браузеры, в том числе IE9+.
По умолчанию вы можете использовать простой бар, или вы можете выбрать из нескольких основных форм, такие как:
- Одна линия
- Полукруг
- Полный круг
- Площадь
- Треугольник
Вы также можете разработать ваши собственные формы такие как сердце, облако или даже надпись логотипа вашего сайта. Конечно, это потребует некоторых усилий, но конечный результат может быть невероятным.
Библиотека работает на путях SVG, так что если вы можете построить контурную форму используя разметку SVG вы можете оживи это с этой прогресс-библиотекой.
Анимации также могут включить текст или же иметь собственные шаблоны запуска / остановки. Полный API имеет больше деталей с опциями / обратными вызовами что вы можете просмотреть на досуге.
ProgressBar.js также имеет небольшой инструкция по установке где ты можешь скачать и настроить скрипт используя Bower, npm или более упрощенную страницу GitHub.
И если вы делаете что-нибудь классное, вы можете отправьте ваш код в репозиторий GitHub. Создатель проекта Киммо Брунфельдт имеет открыть выпуск GitHub где ты можешь представить индивидуальные проекты быть включенным в библиотеку.
Вы можете добавить анимированные индикаторы выполнения для регистрации страниц, загрузки полей или на любую веб-страницу в качестве предварительного загрузчика. Варианты ограничены только как подробно вы готовы получить.
Например, мне нравится демоверсия пароля, так как служит реальной цели а также приносит пользу пользователю. Этот пример приходит упакован с плагином, так что вы можете скопировать и изменить его по своему вкусу.
Видеть больше примеров, Посетите домашнюю страницу ProgressBar.js или взгляните на эту скрипку, демонстрирующую анимацию сердца.
