Анимационная загрузка

Анимации при загрузки сообщают пользователю что работа ведется и запрос обрабатывается. Без них пользователь часто думает что нечего не происходит.

Демо

Часто для этого используют файлы GIF.

примеры загрузки анимации
Примеры файлов GIF для загрузки

Альтернативой тяжелых графических изображений — это CSS3. С использованием только базовых элементов HTML и свойств CSS таких как 3D transform, можно создавать красивые и очень легкие анимации. Одним из основных преимуществ использования CSS, не требуется изображение в формате GIF. CSS гораздо быстрее и срабатывает только тогда, когда это нужно.

HTML

<div class="loadingdiv">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

Анимация будет состоять из пяти кругов.

Анимационная загрузка с помощью CSS3
Анимационная загрузка круги

Каждый круг имеет свой цвет с одинаковыми свойствами.

CSS

.loadingdiv span{
 display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  margin: 50px auto;
  background: #174C4F;
  border-radius: 5px;
  -webkit-animation: loading 0.9s infinite alternate;
  -moz-animation: loading 0.9s infinite alternate;
  box-shadow:1px 1px 1px #444444;
}

Изменить цвет каждого круга.

.loadingdiv span:nth-of-type(2) {
  background: #207178;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
}
.loadingdiv span:nth-of-type(3) {
  background: #FF9666;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
}
.loadingdiv span:nth-of-type(4) {
  background: #FFE184;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
}
.loadingdiv span:nth-of-type(5) {
  background: #F5E9BE;
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
}

Разный цвет для кругов добавит псевдокласс :nth-of-type(). Анимации для каждого диапазона с задержкой 0,2S. Таким образом span покажет анимацию на постоянной основе.

Дальше определим анимации с помощью Преобразования CSS3 и ключевых кадров.

@-webkit-keyframes loading {
  0% {
  width: 10px;
  height: 10px;
  -webkit-transform: translateZ(0);
  }
  100% {
  width: 24px;
  height: 24px;
  -webkit-transform: translateZ(-21px);
  }
}
@-moz-keyframes loading {
  0% {
  width: 10px;
  height: 10px;
  -moz-transform: translateZ(0);
  }
  100% {
  width: 24px;
  height: 24px;
  -moz-transform: translateZ(-21px);
  }
}

Чтобы сделать их внешний вид более стильным, применим translateZ 0px при 0% и 21px при 100%. Это даст эффект круга.

Анимационная загрузка с помощью CSS3
Анимационная загрузка

Для эксперимента, попробуйте изменить преобразование от transformZ до transformY. Вы получите другой эффект, круги будут двигаться вертикально.

Анимационная загрузка с помощью CSS3
Анимационная загрузка 1

Если удалить фон из каждого диапазона и залить одним цветом, например #888888. После добавления opacity:0.1 при 0% и преобразования opacity:1 на 100%, получим такой результат.

Анимационная загрузка с помощью CSS3
Анимационная загрузка 2