Лёгкая полоса загрузки на 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
Такая проверка носит чисто визуальный характер. Если подобная валидация для вас важна - обязательно делайте проверку на сервере.

javascripthtmlcssпрограммированиеvox-populi
25%
227
98
423.796 GOLOS
0
В избранное
Web Development
Тех, кто презирает программистов, программисты презирают сильнее, чем те, кто презирает тех программистов, которые презирают тех, кто их презирает.
98
0

Зарегистрируйтесь, чтобы проголосовать за пост или написать комментарий

Авторы получают вознаграждение, когда пользователи голосуют за их посты. Голосующие читатели также получают вознаграждение за свои голоса.

Зарегистрироваться
Комментарии (1)
Сортировать по:
Сначала старые