Зарядите страницу с волной: прелоадер Google, который захватывает!

Google Pre-Loader — это стильный и функциональный волнообразный прелоадер, созданный с использованием CSS.
Этот прелоадер поможет улучшить восприятие вашего сайта, предоставив пользователю интересный эффект загрузки, который будет привлекать внимание и не даст скучать в момент ожидания.

Особенности:

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

Как использовать:
Просто добавьте код с CodePen в ваш проект, и ваш сайт начнёт демонстрировать эффект волн на момент загрузки.

Это не просто красивый прелоадер, но и возможность улучшить UX вашего сайта!

See the Pen Google Pre-Loader by Seth Spivey (@sethgspivey) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <div class = "container">
  <div id="css-preloader">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
   </div>
</div>

        CSS
 
  
  Показать код CSS
  
         
.container {
  width: 100%;
}
#css-preloader{
  position:relative;
  width: 100%;
  margin: 10% 0 0 45%;
}
#css-preloader span{
  display: block;
  bottom: 0px;
  width: 5px;
  height: 10px;
  background: #e43632;
  position: absolute;
  animation: preloader_1 2.25s  infinite ease-in-out;
}
 
#css-preloader span:nth-child(2){
  left: 11px;
  animation-delay: .2s;
}
#css-preloader span:nth-child(3){
  left:22px;
  animation-delay: .4s;
}
#css-preloader span:nth-child(4){
  left:33px;
  animation-delay: .6s;
}
#css-preloader span:nth-child(5){
  left:44px;
  animation-delay: .8s;
}
#css-preloader span:nth-child(6){
  left: 55px;
  animation-delay: 1s;
}
#css-preloader span:nth-child(7){
  left: 66px;
  animation-delay: 1.2s;
}
#css-preloader span:nth-child(8){
  left: 77px;
  animation-delay: 1.4s;
}
#css-preloader span:nth-child(9){
  left: 88px;
  animation-delay: 1.6s;
}
@keyframes preloader_1 {
0% {
  height: 10px;
  transform: translateY(0px);
  background: #fdcf01;
 }
  
25% {
  height: 60px;
  transform: translateY(15px);
  background: #4bb846;
}
50% {
  height: 10px;
  transform: translateY(-10px);
  background:#2988dd;
}  
100% {
  height: 10px;
  transform: translateY(0px);
  background: #e43632;
  }
}