Javascript progress bar — как сделать прогресс бар, демо пример.

Всем привет! В этой небольшой заметке я расскажу как можно сделать визуальную полосу загрузки чего либо с помощью JavaScript!

В прошлой статье я рассказывал о том, как сделать всплывающее окно на прозрачном фоне, сегодня мы рассмотрим пример создания полосы состояния загрузки с выводом процентов.

Если вас интересует вопрос, касающийся создания progress бара, то вы, должно быть, знаете, где применяется полоса состояния загрузки.

Мы можем встретить её, например, загружая большой файл на файлообменник, либо загружая фотографию в социальной сети, ожидая загрузки игры и так далее..

Сначала я расскажу о методе создания простого, но эффективного прогресса бара, а потом мы разберем код..

Как создать progress bar?

Вообще, как только мне захотелось сделать полосу загрузки, мне в голову сразу пришла идея с картинкой, которая изменяет свои размеры.

То есть имеется некая картинка, ширина которой по-умолчанию равна нулю (0), но по мере загрузки (некого процесса) у картинки изменяется ширина.

Давайте рассмотрим код..

Глобальная переменная interest отвечает за значение загруженного процента – вначале она равна нуля.

Функция go() отвечает за изменение (вывод на экран) процента и размеров картинки (ширины).

Я разместил несколько кнопочек, а именно:

• Сброс (простое обновление текущей страницы)
• 1000 мс
• 100 мс
• 10 мс
• 1 мс

N мс, где N – это время (в миллисекундах) изменения загрузки на один процент (1%).

При клике на кнопку со временем, будет устанавливаться интервал повторения функции go(), например:

“setInterval(go, 2000)” – выполнять имеющуюся функцию (первый параметр) через каждые 2 секунды (второй параметр в миллисекунда, 1 с = 1000 мс).

Вот, в принципе и весь механизм создания прогресс бара.

В следующем уроке (далее в тексте имеется ссылка на следующий урок) я покажу применение полосы загрузки, а в качестве примера напишу примитивную игрушку на javascript, в которой нужно ломать стену и при этом мы будем видеть как изменяются, так скажем, жизни стены.

А вот пример и исходник прогресс бара.

На этом все, пока.

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.