О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Прогресс бар заполнения формы
  • Инструменты
  • Заработок
  • Раскрутка
15 июня 2016 . Антон Кулешов

Прогресс бар заполнения формы

Необходимость заполнения длинных форм, зачастую, очень не нравится пользователям. Чтобы как-то снивелировать негативный эффект можно прикрепить к форме анимированный прогресс бар её заполнения. Сегодня речь пойдёт об 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). В заключение к этой статье, я хочу сказать, что при добавлении стилей прогресс бар можно поместить непосредственно над формой или под ней и это будет выглядеть, в некоторых случаях, ещё более интересно.

#Прогрессбары и лоудеры
10 222
Антон Кулешов
Прогресс бар как на YouTube Анимированный прогресс бар в 4 строки кода Создание анимированного кольца загрузки при помощи SVG и GSAP Прелоадер с SVG анимацией Простой прогресс бар с набором настроек
Комментарии не найдены

Множество WordPress «велосипедов» в одном плагине Bicycles by falbar

Глитч текста

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание