Показать Меню
falbar Анимированный прогресс бар

Анимированный прогресс бар в 4 строки кода

Анимированный прогресс бар

Наличие на сайте прогресс бара действительно будет полезным, когда пользователю требуется сообщить о том, что на странице происходит что - то при долгом выполнении скрипта. Из этой статьи Вы узнаете, как установить к себе на сайт progressbar, затратив на это всего пару минут времени.

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

<div id="progressBar">
	<div></div>
</div>

Теперь пропишем стандартные стили для этой структуры:

#progressBar{
	margin-left: 100px;
	width: 400px;
	height: 22px;
}
#progressBar div{
	height: 100%;
	color: #fff;
	text-align: right;
	font-size: 12px;
	line-height: 22px;
	width: 0;
}

С подготовительным этапом покончено. Осталось подключить функцию или добавить её к себе в проект:

function progressBar(percent, $element){
	var progressBarWidth = percent * $element.width() / 100;
	$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");
}

Функция progressBar принимает два параметра: процент выполнения и элемент. Вызов её будет выглядеть таким образам:

progressBar(50, $("#progressBar"));

Как видите, Вам потребуется всего четыре строки кода, чтобы реализовать у себя красивый анимированный прогресс бар. В архиве с примером Вы найдёте пять вариантов стилей прогресс бара. Стандартные стили не отвечают за визуальное представление скрипта, поэтому стоит подключить один из вариантов, например – это будут стили, лежащие в папке default, с таким же названием добавляем класс к диву с id=progressBar.

После выполнения всех этих действий у Вас на странице появится довольно хороший и удобный прогресс бар.

Подписаться на обновления

Комментариев еще не оставлено