Как сделать прогресс бар
Темой сегодняшнего урока, будет создание прогресс бара. Это длинная полоска, которая заполняется цветом, по мере выполнения какой-либо задачи, например загрузки файла.
Впрочем прогресс бар может выглядеть и по другому. Смысл его состоит в том, чтобы чем-то занять пользователя, на время выполнения невидимого процесса.
Веб-разработчики, вообще-то редко сталкиваются с индикатором загрузки, но не спешите уходить. Вам стоит отнестись к этому уроку, как к великолепной возможности, погрузиться в мир языка программирования JavaScript, не столько ради прогресс бара, а увидеть на конкретном примере, как работает JavaScript.
Демонстрация примера
HTML разметка
На скриншоте отчетливо видно, что индикатор загрузки представляет собой зеленый блок div внутри серого div-а. Зеленая полоска постепенно должна закрыть собой серую. Запускается эта анимация, кликом по кнопке Пуск, у тега button значение атрибута onclick, такое же как и название функции – move.
<div id="greyProgress">
<div id="greenBar">10%</div>
</div>
<br>
<button onclick="move()">Пуск</button>
CSS стилизация
Серая полоса на всю ширину браузера.
#greyProgress {
width: 100%;
background-color: #ddd;
}
В состоянии покоя, зеленая полоса занимает 10% ширины относительно серой.
#greenBar {
width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
JS код
JavaScript заставит двигаться зеленую полоску до конца с весело меняющимися процентами.Создадим функцию с названием move, которая получит элемент (elem) с id greenBar (зеленая полоска).
function move() {
var elem = document.getElementById("greenBar");
Объявим переменную width, приравненную к числовому значению 10.
var width = 10;
Переменная с названием id содержит метод setInterval с двумя аргументами, frame (ещё одна функция) и 10 (время задержки в милисекундах). Задержка нужна для того, чтобы вы видели эффект. Метод setInterval, запускает функцию с интервалом в 10 мс.
var id = setInterval(frame, 10);
function frame() {
Функция frame состоит из условия, при котором если ширина больше или равна 100, тогда надо остановить исполнение функции, вызвав метод clearInterval, который прекращает запланированное исполнение кода, установленное методом setInterval.
if (width >= 100) {
На практике это означает, что как только зеленая полоска дойдет до 100 процентов, задание выполнено и необходимо его остановить.
clearInterval(id);
В противном случае, надо инкрементировать ширину. Это когда, два знака "++", увеличивают значение переменной width на 1.
} else {
width++;
Здесь мы уточняем, что ширина, указанная в стилях у элемента c id greenBar (elem), будет увеличиваться на 1%.
elem.style.width = width + '%';
Эта строка создает эффект прибавления процентов на прогресс баре.
elem.innerHTML = width * 1 + '%';
}
}
}
-
Создано 23.11.2018 10:00:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.