Лёгкая полоса загрузки на JavaScript
Такую интересную библиотеку нашел на просторах сети. Подключается она достаточно просто - нужно всего лишь подключить один js файл, при необходимости задать настройки.
Библиотека называется nanobar.
Исходники можно скачать с GitHub
Назначение
Создание индикатора загрузки. По-умолчанию он будет приклеен к верхней части экрана, но его можно привязать к любому элементу на странице.
Использование
На гитхабе скачайте nanobar.js или даже nanobar.min.js и подключайте как обычный js файл.
<script src="/js/nanobar.js"></script>
Далее создавайте экземпляр класса Nanobar. Всё это пишется в JavaScript.
var simplebar = new Nanobar();
Для управления полосой загрузки используйте метод go, передавая ей в качестве аргумента процент загрузки.
Для удобства выведем кнопки для управления, на html:
<button onclick="simplebar.go(10)">10</button>
<button onclick="simplebar.go(30)">30</button>
<button onclick="simplebar.go(50)">50</button>
<button onclick="simplebar.go(80)">80</button>
<button onclick="simplebar.go(100)">100</button>
Таким образом вся страница будет выглядеть так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nanobar</title>
<script src="/js/nanobar.js"></script>
</head>
<body>
<script>
var simplebar = new Nanobar();
</script>
<button onclick="simplebar.go(10)">10</button>
<button onclick="simplebar.go(30)">30</button>
<button onclick="simplebar.go(50)">50</button>
<button onclick="simplebar.go(80)">80</button>
<button onclick="simplebar.go(100)">100</button>
</body>
</html>
Посмотреть рабочий пример можно тут
Исходник https://pastebin.com/FftLRuak
А выглядеть это будет так:
https://i.imgur.com/4VLNz16.png
Если прогресс-бар нужен для контейнера - создадим его и натравим nanobar на него.
<div class="cont"></div
Сразу добавим стили:
#cont {
width: 300px;
height: 30px;
background-color: #bfe514;
display: block;
}
При создании nanobar укажем ему id контейнера div:
var simplebar_1 = new Nanobar({target: document.getElementById('cont')});
И выведем кнопки:
<button onclick="simplebar_1.go(10)">10</button>
<button onclick="simplebar_1.go(30)">30</button>
<button onclick="simplebar_1.go(50)">50</button>
<button onclick="simplebar_1.go(80)">80</button>
<button onclick="simplebar_1.go(100)">100</button>
Теперь прогресс-бар у контейнера, а не у всей страницы.
https://i.imgur.com/wnNXY7w.png
Темизация
Сделать прогресс-бар "пошире" и "красненьким" можно с помощью стилей.
Просто указываем высоту и бэкграунд:
#cont .nanobar .bar {
height: 5px;
background-color: orangered;
}
В качестве фона можно задать любое изображение или сделать заливку градиентом.
Исходник https://pastebin.com/F2rHx8DR
Практическое применение
Первое, что пришло в голову - это отображать прогресс формы. Для этого сделаем простенькую форму:
<form id="forma">
<input type="radio" name="q_1" id="q_1" value="1"><label for="q_1">Я готов впустить блокчейн в свою жизнь</label><br />
<input type="radio" name="q_1" id="q_2" value="0"><label for="q_2">Блокчейн - это финансовая пирамида</label><br />
<hr />
<input type="radio" name="q_2" id="q_4" value="1"><label for="q_4">Я пишу качественный контент</label><br />
<input type="radio" name="q_2" id="q_5" value="0"><label for="q_5">Я копипащу</label>
<hr />
<input type="radio" name="q_3" id="q_6" value="0"><label for="q_6">У меня 15 ботов ✖‿✖</label><br />
<input type="radio" name="q_3" id="q_7" value="1"><label for="q_7">Я понимаю экономику голоса</label>
<hr />
<input type="radio" name="q_4" id="q_8" value="1"><label for="q_8">Я пишу для академии и vox-populi</label><br />
<input type="radio" name="q_4" id="q_9" value="0"><label for="q_9">Эстафетацвета наше всё</label>
<hr />
<input type="submit" class="submit" value="Отправить">
</form>
Правильные ответы будут иметь value="1". Неправильные - "0".
Сразу добавим стили:
#forma {
width: 500px;
margin: 30px auto 0;
border: 1px solid black;
}
.nanobar .bar {
height: 5px;
background-color: #b0ff56;
}
JavaScript будет следующим:
var simplebar = new Nanobar({target: document.getElementById('forma')});
$('.submit').attr('disabled', 'disabled');
$('[type="radio"]').on('change', function() {
var proc = 0;
$('[type="radio"]:checked').each(function(ind) {
proc += $(this).val() * 25;
});
simplebar.go(proc);
if (proc == 100) {
$('.submit').removeAttr('disabled');
} else {
$('.submit').attr('disabled', 'disabled');
}
});
Важно - на странице подключаем jQuery.
Сразу поясню: simplebar - натравливаем на форму.
По-умолчанию задизаблим кнопку отправки формы.
При отметке любого радиобатона - перебираем все отмеченные радиобатоны и умножаем значение их атрибута value на 25. Так как вопросов 4, то 100 / 4 = 25.
При достижении 100 процентов - разлочим кнопку отправки.
Рабочий пример тут
Исходник https://pastebin.com/gsVwDXLU
Скриншот того, что получилось.
https://i.imgur.com/LJ7Q12z.png
Такая проверка носит чисто визуальный характер. Если подобная валидация для вас важна - обязательно делайте проверку на сервере.
