4 873 Скрипты / Loading

CSS3 анимация загрузки

Прелоадер на CSS3 в котором используется два вида анимации: выцветание теругольников и анимация поворота всего элемента. Все вместе эти анимации позволяют создать довольно неплохой эффект.

HTML

<div class="loading-wrap">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
</div>

CSS

Поскольку выцветание всех трех треугольников происходит постепенно, то мы должны установить задержку анимации.
Обратите внимание на промежуток между 20% и 100% для вращения keyframes, это позволяет достичь эффекта остановки анимации.

Скачать 660Загрузок 1021 b
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи