Обложка канала

Frontender's notes

Годные заметки, новости, видео и интересные статьи для Frontend разработчиков.

Frontender's notes

5 лет назад
Открыть в
Как сделать красивый и современный индикатор выполнения(Progress Bar) для веб-сайтов, используя HTML, CSS и JavaScript?
🔴Примечание для новичков.
Данный пример реализован в одном файле.

👉🏻Cтрока
var id = setInterval(frame, 80);
многим новичкам может показаться незнакомым и странным , но его определение предельно простое:
Метод setInterval () вызывает функцию или оценивает выражение через определенные интервалы (в миллисекундах).

👉🏻 function frame(), переданная методу setInterval в виде параметра, является "движущей" функцией для индикатора выполнения,которая будет выполняться каждые 80 миллисекунд (2-й параметр) , именно в этой функции есть строка, которая отвечает за прибавление значения индикатора (строка ниже):
elem.style.width = width + '%';

👉🏻Метод clearInterval () ,вызванный после вызова метода setInterval () , очищает таймер, установленный с помощью того же метода setInterval ().