Замена лоадера GIF на анимацию CSS

Сегодня покажу как сделать заменить " loading" картинку на CSS . Идея состоит в том, чтобы управлять объектами HTML, используя только CSS , таким образом, мы можем избавится от GIF.

Отказ от ответственности: Цель этой статьи состоит в том, чтобы показать Вам возможности CSS. Содержание может не быть практичным, чтобы использовать в действительности. Демонстрационный пример работает лучше всего в Хроме, и частично работает в Firefox и Сафари.

ПРЕИМУЩЕСТВА ИСПОЛЬЗОВАНИЯ ANIMATION CSS перед GIF/JS
Это дало мне больше контроля над анимацией. Я нашел, что намного более удобнее отредактировать элементы и скорость анимации через CSS вместо того, чтобы по мучатся с Фотошопом.
Анимация CSS использует ускорение GPU, которое намного быстрее, чем применение JS и намного легче с точки зрения размера, когда сравниваются с gif изображениями.
CSS позволяет пользователям быть в состоянии взаимодействовать с анимацией. Для gif изображений нет никакого взаимодействия между пользователями и анимацией.
С ДРУГОЙ СТОРОНЫ, ТАКЖЕ ЕСТЬ НЕКОТОРЫЕ НЕДОСТАТКИ
Анимация CSS еще широко не поддерживается. Например, в нашем демонстрационном примере, некоторые аннимации не работают в Сафари, но работают хорошо в Хроме.
Чтобы улучшить работу, я решил свести код HTML к минимуму, чтобы ускорить начальную загрузку страницы. Реализовал при помощи псевдо элементов :before и :after. CSS позволяет мне легко создавать 3 анимированных элемента, используя один HTML-тэг. Вы можете легко отредактировать любые изменения, просто регулируя числа в файле CSS.
В демо 5 различных АЯКСА CSS, анимации, чтобы показать Вам,на что способна анимация CSS . Не стесняйтесь экспериментировать на них так, как Вы хотите.
Я надеюсь, что Вы понравились мой небольшой эксперимент и если у Вас есть идеи, чтобы показать нам, не стесняйтесь показывать их в комментариях ниже.

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

<link rel="stylesheet" type="text/css" href="css/style.css" />

<div id="loading-layer"><img src="{{ tpl_url }}/images/loading.gif" alt="" /></div>

<div id="loading-layer"><div class="loader1">
	        	<i></i><i></i>
	      	</div></div>

Можешь почитать и вот эту статейку "HTML теги article"