Необходимость заполнения длинных форм, зачастую, очень не нравится пользователям. Чтобы как-то снивелировать негативный эффект можно прикрепить к форме анимированный прогресс бар её заполнения. Сегодня речь пойдёт об JavaScript библиотеке под названием fort.
Первое, что следует отметить - это удобство её использования. Во-вторых, для её работы не нужно сторонних решений и фреймворков. В-третьих, скрипт выполняет одну задачу и не размыт большим функционалом, который, в большинстве случаев, может быть и не нужен. При желании fort.js можно оптимизировать, к примеру, на странице демо можно увидеть, что есть несколько вариантов его использования, но в проекте более двух вряд ли кто будет применять. Поэтому лишнее можно удалить из файла скрипта, так как весь код - это объект с методами и простой архитектурой.
Теперь давайте рассмотрим один пример и начнем с подключения необходимых файлов:
<link href="css/fort.min.css" type="text/css" rel="stylesheet" />
<script src="js/fort.min.js" type="text/javascript"></script>
Далее пришло время добавить на HTML страницу разметку. Сам принцип, по которому работает прогресс бар формы, очень прост: форму с инпутами или просто инпуты необходимо обернуть в div с классом form. Да, скажу сразу, что привязка к конкретному классу - не очень удобное решение, но поковырявшись в коде, это легко можно исправить. HTML код будет выглядеть так:
<div class="form">
<form action="#">
<input type="text" />
</form>
</div>
Воспользуемся одним из методов библиотеки:
Fort.solid("#009dff");
Вот и всё! Выше я написал «одним из методов», а теперь рассмотрим же, какие есть ещё методы у объекта Fort. Как они работают показано на странице демо. Вот список: solid, gradient, sections, flash, merge. Все эти методы на вход принимают только цвета. Есть ещё один - это config:
Fort.config({
height: "15px",
duration: "2s",
alignment: "top"
});
В настройках можно указать высоту прогресс бара, скорость анимации и отображение, вверху (top) или внизу (bottom). В заключение к этой статье, я хочу сказать, что при добавлении стилей прогресс бар можно поместить непосредственно над формой или под ней и это будет выглядеть, в некоторых случаях, ещё более интересно.