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

11 декабря 2014 Антон Кулешов 4034 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
Читайте далее

Простой lightbox на JavaScript без jQuery

30 июля 2014 Антон Кулешов

Если порыться по интернету, то можно найти кучу вариаций по созданию lightbox. В основном их делают при помощи библиотек (jQuery). Когда сайт большой и скрипта много, это правильное решение. Зачем тратить время на всякие проверки, к тому же ещё и для ie придётся пол кода дописывать. Но если сайт не значительных размеров или вы не ориентируетесь на старые версии браузеров, то, тут я думаю, нет смысла тянуть библиотеку в десять тысяч строк кода, а то и больше, для реализации всплывающей подсказки или формы обратной связи.

Файл «robots.txt» – версия Яндекс

3 июля 2015 ti1schweiger

Всем добра! Возможно, сегодня я не скажу ничего нового, и вся изложенная ниже информация находится в свободном доступе в Помощи Яндекса, но, как показывает практика, очень мало людей ею пользуется, да и вообще задумывается о её существовании. Поэтому, дабы развеять сумрак над тем, что же все-таки должно быть написано в robots.txt, я приведу здесь материалы из Помощи Яндекса со своими личными комментариями.

Всплывающие подсказки на чистом CSS

16 апреля 2015 Антон Кулешов

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