Как сделать progress bar на JavaScript?

Полоса загрузки

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

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

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

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

progress_bar

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

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

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

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

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

<script type="text/javascript">
			
	window.interest = 0;
	
		//Увеличиваем процент и растягиваем полосу прогресса
	function go(){
				
				//Пока не 100% увеличиваем процент
		if(interest != 100) {
			interest++;
			document.getElementById('interest').innerHTML = interest + ' %';
			document.getElementById('progress').style.width = interest * 5 + 'px';
		}
		else{
			document.getElementById('interest').innerHTML = 'Загрузка завершена';
			document.getElementById('interest').style.margin = '15px 0 0 186px';
		}
	}
	
</script>

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

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

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

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

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

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

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

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

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

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

Demo Progress bar

Скачать пример

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


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

  1. Витос пишет:

    Это мнимая анимация и мнимый прогресс-бар

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>