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

11 декабря 2014 Антон Кулешов 4057 0

Наличие на сайте прогресс бара действительно будет полезным, когда пользователю требуется сообщить о том, что на странице происходит что - то при долгом выполнении скрипта. Из этой статьи вы узнаете, как установить к себе на сайт 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.

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Простой визуальный редактор как на Хабрахабр

30 сентября 2014 Антон Кулешов

В этой статье я расскажу о написанном мною jQuery плагине, который позволяет подключить к своему проекту простой визуальный редактор, как на сайте Хабрахабр.

Авто эффект печатания текста

31 марта 2016 Антон Кулешов

Несколько статей назад, я рассказывал: как написать на JavaScript простую имитацию набора текста на печатной машинке. Воспользовавшись данным эффектом можно, к примеру, выделить важные заголовки на странице. Но при написании скрипта не были учтены маленькие нюансы. В общем, сегодня мы рассмотрим jQuery плагин под название typed. Он будет хорошим инструментом в арсенале веб-разработчика, когда потребуется добавить на сайт эффект набора текста.

«Легкая упоротость» глитч эффект

1 апреля 2015 ti1schweiger

«А у тебя коленки сзади грязные!» - согласитесь, звучит неубедительно в реалиях сегодняшнего времени, тем более, когда реальное общение все больше заменяет виртуальное. Как же шутить на 1 апреля? – Да очень просто! Хотите разыграть пользователей своего ресурса? – Используйте глитч эффект. Кто еще не в теме, поясню, глитч эффект – это эффект сломанного монитора, который уже не раз умудрились уронить и у которого серьезно барахлят сведение и вертикальная синхронизация.