Плавный прелоадер Bouncing Liquid Loader на CSS

Представляем элегантный и успокаивающий прелоадер "Bouncing Liquid Loader", выполненный с помощью чистого CSS.

Анимация имитирует движение капли, которая медленно и плавно перемещается в разные стороны — влево, вправо, вверх и вниз, одновременно изменяя свою форму.

Её движение напоминает ритмичное дыхание, создавая ощущение спокойствия и гармонии.

Анимация выполнена в нормальном темпе, без рывков и резких изменений, что делает её особенно приятной для глаз.

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

See the Pen Bouncing Liquid Loader by Fabio Ottaviani (@supah) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <!--
 
Follow me on
Dribbble: https://dribbble.com/supahfunk</span>
Twitter: https://twitter.com/supahfunk</span>
Codepen: https://codepen.io/supah/</span>
 
-->
<div class="wrapper">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
</div>
 
<svg>
  <defs>
    <filter id="filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="18" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 28 -10" result="filter" />
      <feComposite in="SourceGraphic" in2="filter" operator="atop" />
    </filter>
  </defs>
</svg>

        CSS
 
  
  Показать код CSS
  
         
body {
  background: #0e1e2f;
}
 
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: url("#filter");
}
 
.ball {
  width: 60px;
  height: 60px;
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
}
.ball:before {
  background: #00ffdd;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}
.ball:nth-child(1) {
  transform: translate(-66px);
  -webkit-animation: x-axis-lateral 2s infinite alternate ease-in-out;
          animation: x-axis-lateral 2s infinite alternate ease-in-out;
}
.ball:nth-child(1):before {
  -webkit-animation: y-axis-lateral 1s infinite 0.1s alternate ease-in-out;
          animation: y-axis-lateral 1s infinite 0.1s alternate ease-in-out;
}
.ball:nth-child(2) {
  -webkit-animation: x-axis 2s infinite alternate ease-in-out;
          animation: x-axis 2s infinite alternate ease-in-out;
}
.ball:nth-child(2):before {
  -webkit-animation: y-axis 1s infinite 0.5s alternate ease-in-out;
          animation: y-axis 1s infinite 0.5s alternate ease-in-out;
}
.ball:nth-child(3) {
  transform: translate(66px, 78px);
  -webkit-animation: x-axis-lateral 2s infinite alternate ease;
          animation: x-axis-lateral 2s infinite alternate ease;
}
.ball:nth-child(3):before {
  -webkit-animation: y-axis-lateral 1s infinite 0.4s alternate ease-in-out;
          animation: y-axis-lateral 1s infinite 0.4s alternate ease-in-out;
}
 
@-webkit-keyframes x-axis {
  0% {
    transform: translate(-96px);
  }
  100% {
    transform: translate(96px);
  }
}
 
@keyframes x-axis {
  0% {
    transform: translate(-96px);
  }
  100% {
    transform: translate(96px);
  }
}
@-webkit-keyframes y-axis {
  0% {
    transform: translateY(42px);
  }
  100% {
    transform: translateY(-66px) scale(0.8);
    background: #00fffb;
  }
}
@keyframes y-axis {
  0% {
    transform: translateY(42px);
  }
  100% {
    transform: translateY(-66px) scale(0.8);
    background: #00fffb;
  }
}
@-webkit-keyframes x-axis-lateral {
  0% {
    transform: translate(-36px);
  }
  100% {
    transform: translate(36px);
  }
}
@keyframes x-axis-lateral {
  0% {
    transform: translate(-36px);
  }
  100% {
    transform: translate(36px);
  }
}
@-webkit-keyframes y-axis-lateral {
  0% {
    transform: translateY(12px);
  }
  100% {
    transform: translateY(-60px);
    background: #00fffb;
  }
}
@keyframes y-axis-lateral {
  0% {
    transform: translateY(12px);
  }
  100% {
    transform: translateY(-60px);
    background: #00fffb;
  }
}