Всем привет! Сегодня рассмотрим, как сделать прелоадер на чистом CSS3 .

Как сделать прелоадер на чистом CSS3.

Всем привет! Сегодня рассмотрим, как сделать прелоадер на чистом CSS3.

Раньше, чтобы выполнить такую задачу, нам пришлось бы использовать javascript, однако теперь мы можем делать все на чистом CSS3. И, как это сделать, мы и рассмотрим в этом материале.

Для начала создадим разметку

<div class="pre-loader">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
</div>

Как видите, разметка достаточно простая. Все заключено в стилях

Пропишем базовые стили для всех блоков

.pre-loader {
  margin: 200px auto;
  width: 66px;
  height: 50px;
}

.pre-loader > div {
  background-color: #34495e;
  height: 100%;
  width: 10px;
  display: inline-block;
}

Создадим анимацию

@keyframes myMove {
  0% {top: 0px;}
  25% {top: 200px;}
  50% {top: 100px;}
  75% {top: 200px;}
  100% {top: 0px;}
}

И еще несколько анимаций

@-webkit-keyframes heightChange {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes heightChange {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20% { transform: scaleY(1.0); }
}

Запишем анимацию блокам

.pre-loader > div {
  background-color: #fff;
  height: 100%;
  width: 10px;
  display: inline-block;
  -webkit-animation: heightChange 1s infinite ease-in-out;
  animation: heightChange 1s infinite ease-in-out;
}

И все, что осталось сделать, это добавить задержку анимации каждому блоку, чтобы они анимировались по очереди.

.pre-loader .box2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.pre-loader .box3 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.pre-loader .box4 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.pre-loader .box5 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

Вот и все! Вот так просто можно сделать прелоадер на чистом CSS3.

Спасибо за внимание!