Простой CSS-прелоадер с анимацией для сайта

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

Этот анимированный прелоадер, созданный на чистом CSS, — идеальный выбор для минималистичных и современных интерфейсов. Лёгкая реализация, плавные анимации и отсутствие необходимости в jаvascript делают его универсальным решением. Вы можете легко адаптировать этот прелоадер под стиль вашего проекта, добавляя свою индивидуальность.

Сделайте ожидание более приятным для ваших пользователей с помощью этого элегантного решения.

See the Pen Еще один анимированный прелоадер by Anton Rikhnovets (@rikhnovets) on CodePen.

        HTML

  
  Показать код HTML
  
    
   
  <!--====== Preloader Start ======-->
  <div id="preloder">
    <div class="loader"><div></div><div></div><div></div></div>
  </div>

        CSS
 
  
  Показать код CSS
  
         
/*------------------
 Preloder
--------------------*/
 
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #000;
}
 
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(0.6);
    transform: rotate(180deg) scale(0.6);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
 
.loader {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 57%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  -webkit-transform: translateY(-25px);
  transform: translateY(-25px);
}
 
.loader>div {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  left: -20px;
  top: -20px;
  border: 2px solid #fff;
  border-bottom-color: transparent;
  border-top-color: transparent;
  border-radius: 100%;
  height: 35px;
  width: 35px;
  -webkit-animation: rotate 1s 0s ease-in-out infinite;
  animation: rotate 1s 0s ease-in-out infinite;
}
 
.loader>div:last-child {
  display: inline-block;
  top: -10px;
  left: -10px;
  width: 15px;
  height: 15px;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  border-color: #fff transparent #fff transparent;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}