slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 2064
Теги: css3, jQuery, icon, loader, загрузка

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

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

Например, если у вас и так используется эта библиотека для других скриптов, а делать анимированное изображение формата gif вам не хочется. Так же способ идеально подойдет, если в качестве фона у лоадера будут разные цвета или изображения, потому что нашим способом можно задавать лоадер с прозрачным фоном.

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

Подготовим разметку:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
	<script type="text/javascript" src="/../js/script.js"></script>
</head>
<body>
	<div></div>
</body>
</html>

Этот самый div и будет представлять наш загрузчик.

Добавим стили:

div {
	background: url('/../images/loader.png');
	background-size:contain;
	height:56px;
	width:56px;
}

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

Остается только дописать скрипт, тут важно следить за тем, что бы угол не превышал 360 градусов, иначе эта переменная может накапливаться в течение долгого времени и будет переполнение, при этом правильно обнулять угол, чтобы изображение не задерживалось и не дрыгалось в этот момент. Так же нужно правильно подобрать угол, на который необходимо поворачивать загрузчик, я в примере использовал 45 градусов и мне этого было достаточно.

$(document).ready(function() { // Ждём загрузки страницы
				
	var deg = 0; // Начальное значение угла поворота
	function sec() {  // Повторяющаяся функция
		if (deg != 360) { // Если угол не превышает 360 градусов
			deg += 45; // увеличиваем на 45 градусов угол
		}
		else {
			deg = 45; // обнуляем значение угла поворота
		}
		$("div").css("transform","rotate("+deg+"deg)"); // вертим загрузчик
	}
	setInterval(sec, 100) // использовать функцию

});

Результат можете увидеть на демо-странице:

demo

Или скачать файлы себе:

download

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    5.60
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

!important в CSS Просмотров 2078
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее
Запрет обтекания элемета при помощи свойства clear

Довольна часто встречается ситуация, когда из-за того, что элементам задают различные параметры свойства float. Из-за этого другие элементы ведут себя не так как нам хотелось бы. Справится с такой ситуацией нам поможет свойство clear с параметром both CSS языка.

Теги:

css, div, css3, float, both, left, right

Комментариев: 0 Подробнее
Красивое оформление ссылок при помощи CSS

Стандартный стиль для ссылок не часто подходит под дизайны сайтов. И появляется необходимость поменять стиль так, чтобы в текущий дизайн и при этом красиво выделялась. Противоречивая задача, не правда ли? =)

Теги:

css, css3, rgba, hover, color, active

Комментариев: 0 Подробнее

Последнее с форума

intuit89 аватар
Работаем в прежнем режиме, ждем новых заказов с интересными проектами...
Перейти в тему
ZOMRO аватар
Виртуальные выделенные сервера на облачной платформе Облачные VDS/VPS — это услуга, которая поможет...
Перейти в тему
ZOMRO аватар
Друзья, встречайте новинку в ассортименте наших услуг — тарифный план “Nano”. Тариф VDS/VPS «NANO» ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.