Растекающаяся капля: элегантный прелоадер на CSS

Этот уникальный прелоадер в виде большой вращающейся капли создаёт эффект плавности и минимализма.

Реализованный исключительно с использованием CSS, он подойдёт для любых современных веб-проектов, где требуется лёгкий и привлекательный индикатор загрузки.

Простота кода и минимальное использование ресурсов делают его идеальным выбором для оптимизации сайтов.

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

See the Pen A Simple Preloader by Anton Rikhnovets (@rikhnovets) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <div class="preloader">
      <div class="frame">
        <div class="center">
          <div class="ball"></div>
          <div class="blubb-1"></div>
          <div class="blubb-2"></div>
          <div class="blubb-3"></div>
          <div class="blubb-4"></div>
          <div class="sparkle-1"></div>
          <div class="sparkle-2"></div>
          <div class="sparkle-3"></div>
          <div class="sparkle-4"></div>
          <div class="sparkle-5"></div>
        </div>
      </div>
    </div>

        CSS
 
  
  Показать код CSS
  
         
.preloader {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #0d0d10;
    z-index: 10;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}
 
.preloader.hid,.preloader.hid .frame {
    opacity: 0
}
 
.preloader .frame {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    -webkit-filter: contrast(15);
    filter: contrast(15);
    -webkit-transition: all .7s ease;
    transition: all .7s ease
}
 
.preloader .center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}
 
.preloader .ball {
    position: relative;
    width: 90px;
    height: 90px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-filter: blur(15px);
    filter: blur(15px)
}
 
.preloader .blubb-1 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(11deg);
    -ms-transform: rotate(11deg);
    transform: rotate(11deg)
}
 
.preloader .blubb-1:after {
    position: absolute;
    display: block;
    content: '';
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform-origin: 37px 37px;
    -ms-transform-origin: 37px 37px;
    transform-origin: 37px 37px;
    -webkit-animation: 2.7s ease-in-out .2s infinite rotate;
    animation: 2.7s ease-in-out .2s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .blubb-2 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    transform: rotate(288deg)
}
 
.preloader .blubb-2:after {
    position: absolute;
    display: block;
    content: '';
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform-origin: 34px 34px;
    -ms-transform-origin: 34px 34px;
    transform-origin: 34px 34px;
    -webkit-animation: 2.9s ease-in-out .4s infinite rotate;
    animation: 2.9s ease-in-out .4s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .blubb-3 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(266deg);
    -ms-transform: rotate(266deg);
    transform: rotate(266deg)
}
 
.preloader .blubb-3:after {
    position: absolute;
    display: block;
    content: '';
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform-origin: 31px 31px;
    -ms-transform-origin: 31px 31px;
    transform-origin: 31px 31px;
    -webkit-animation: 3.1s ease-in-out .6s infinite rotate;
    animation: 3.1s ease-in-out .6s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .blubb-4 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(124deg);
    -ms-transform: rotate(124deg);
    transform: rotate(124deg)
}
 
.preloader .blubb-4:after {
    position: absolute;
    display: block;
    content: '';
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform-origin: 28px 28px;
    -ms-transform-origin: 28px 28px;
    transform-origin: 28px 28px;
    -webkit-animation: 3.3s ease-in-out .8s infinite rotate;
    animation: 3.3s ease-in-out .8s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .blubb-5 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(112deg);
    -ms-transform: rotate(112deg);
    transform: rotate(112deg)
}
 
.preloader .blubb-5:after {
    position: absolute;
    display: block;
    content: '';
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform-origin: 25px 25px;
    -ms-transform-origin: 25px 25px;
    transform-origin: 25px 25px;
    -webkit-animation: 3.5s ease-in-out 1s infinite rotate;
    animation: 3.5s ease-in-out 1s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .blubb-6 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(251deg);
    -ms-transform: rotate(251deg);
    transform: rotate(251deg)
}
 
.preloader .blubb-6:after {
    position: absolute;
    display: block;
    content: '';
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform-origin: 22px 22px;
    -ms-transform-origin: 22px 22px;
    transform-origin: 22px 22px;
    -webkit-animation: 3.7s ease-in-out 1.2s infinite rotate;
    animation: 3.7s ease-in-out 1.2s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .blubb-7 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(124deg);
    -ms-transform: rotate(124deg);
    transform: rotate(124deg)
}
 
.preloader .blubb-7:after {
    position: absolute;
    display: block;
    content: '';
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform-origin: 19px 19px;
    -ms-transform-origin: 19px 19px;
    transform-origin: 19px 19px;
    -webkit-animation: 3.9s ease-in-out 1.4s infinite rotate;
    animation: 3.9s ease-in-out 1.4s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .blubb-8 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(247deg);
    -ms-transform: rotate(247deg);
    transform: rotate(247deg)
}
 
.preloader .blubb-8:after {
    position: absolute;
    display: block;
    content: '';
    width: 50px;
    height: 50px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform-origin: 16px 16px;
    -ms-transform-origin: 16px 16px;
    transform-origin: 16px 16px;
    -webkit-animation: 4.1s ease-in-out 1.6s infinite rotate;
    animation: 4.1s ease-in-out 1.6s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .sparkle-1 {
    position: absolute;
    top: 38px;
    left: 38px;
    width: 8px;
    height: 8px;
    -webkit-transform: rotate(186deg);
    -ms-transform: rotate(186deg);
    transform: rotate(186deg);
    -webkit-border-radius: 50%;
    border-radius: 50%
}
 
.preloader .sparkle-1:after {
    position: absolute;
    display: block;
    content: '';
    width: 15px;
    height: 15px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: traslateZ(0);
    -ms-transform: traslateZ(0);
    transform: traslateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 48px 48px;
    -ms-transform-origin: 48px 48px;
    transform-origin: 48px 48px;
    -webkit-animation: 3.7s ease-in-out .2s infinite rotate;
    animation: 3.7s ease-in-out .2s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .sparkle-2 {
    position: absolute;
    top: 38px;
    left: 38px;
    width: 9px;
    height: 9px;
    -webkit-transform: rotate(21deg);
    -ms-transform: rotate(21deg);
    transform: rotate(21deg);
    -webkit-border-radius: 50%;
    border-radius: 50%
}
 
.preloader .sparkle-2:after {
    position: absolute;
    display: block;
    content: '';
    width: 16px;
    height: 16px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: traslateZ(0);
    -ms-transform: traslateZ(0);
    transform: traslateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 46px 46px;
    -ms-transform-origin: 46px 46px;
    transform-origin: 46px 46px;
    -webkit-animation: 3.9s ease-in-out .4s infinite rotate;
    animation: 3.9s ease-in-out .4s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .sparkle-3 {
    position: absolute;
    top: 38px;
    left: 38px;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(244deg);
    -ms-transform: rotate(244deg);
    transform: rotate(244deg);
    -webkit-border-radius: 50%;
    border-radius: 50%
}
 
.preloader .sparkle-3:after {
    position: absolute;
    display: block;
    content: '';
    width: 17px;
    height: 17px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: traslateZ(0);
    -ms-transform: traslateZ(0);
    transform: traslateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 44px 44px;
    -ms-transform-origin: 44px 44px;
    transform-origin: 44px 44px;
    -webkit-animation: 4.1s ease-in-out .6s infinite rotate;
    animation: 4.1s ease-in-out .6s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .sparkle-4 {
    position: absolute;
    top: 38px;
    left: 38px;
    width: 11px;
    height: 11px;
    -webkit-transform: rotate(97deg);
    -ms-transform: rotate(97deg);
    transform: rotate(97deg);
    -webkit-border-radius: 50%;
    border-radius: 50%
}
 
.preloader .sparkle-4:after {
    position: absolute;
    display: block;
    content: '';
    width: 18px;
    height: 18px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: traslateZ(0);
    -ms-transform: traslateZ(0);
    transform: traslateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 42px 42px;
    -ms-transform-origin: 42px 42px;
    transform-origin: 42px 42px;
    -webkit-animation: 4.3s ease-in-out .8s infinite rotate;
    animation: 4.3s ease-in-out .8s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .sparkle-5 {
    position: absolute;
    top: 38px;
    left: 38px;
    width: 12px;
    height: 12px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-border-radius: 50%;
    border-radius: 50%
}
 
.preloader .sparkle-5:after {
    position: absolute;
    display: block;
    content: '';
    width: 19px;
    height: 19px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: traslateZ(0);
    -ms-transform: traslateZ(0);
    transform: traslateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 40px 40px;
    -ms-transform-origin: 40px 40px;
    transform-origin: 40px 40px;
    -webkit-animation: 4.5s ease-in-out 1s infinite rotate;
    animation: 4.5s ease-in-out 1s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .sparkle-6 {
    position: absolute;
    top: 38px;
    left: 38px;
    width: 13px;
    height: 13px;
    -webkit-transform: rotate(212deg);
    -ms-transform: rotate(212deg);
    transform: rotate(212deg);
    -webkit-border-radius: 50%;
    border-radius: 50%
}
 
.preloader .sparkle-6:after {
    position: absolute;
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: traslateZ(0);
    -ms-transform: traslateZ(0);
    transform: traslateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 38px 38px;
    -ms-transform-origin: 38px 38px;
    transform-origin: 38px 38px;
    -webkit-animation: 4.7s ease-in-out 1.2s infinite rotate;
    animation: 4.7s ease-in-out 1.2s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .sparkle-7 {
    position: absolute;
    top: 38px;
    left: 38px;
    width: 14px;
    height: 14px;
    -webkit-transform: rotate(53deg);
    -ms-transform: rotate(53deg);
    transform: rotate(53deg);
    -webkit-border-radius: 50%;
    border-radius: 50%
}
 
.preloader .sparkle-7:after {
    position: absolute;
    display: block;
    content: '';
    width: 21px;
    height: 21px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: traslateZ(0);
    -ms-transform: traslateZ(0);
    transform: traslateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 36px 36px;
    -ms-transform-origin: 36px 36px;
    transform-origin: 36px 36px;
    -webkit-animation: 4.9s ease-in-out 1.4s infinite rotate;
    animation: 4.9s ease-in-out 1.4s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .sparkle-8 {
    position: absolute;
    top: 38px;
    left: 38px;
    width: 15px;
    height: 15px;
    -webkit-transform: rotate(265deg);
    -ms-transform: rotate(265deg);
    transform: rotate(265deg);
    -webkit-border-radius: 50%;
    border-radius: 50%
}
 
.preloader .sparkle-8:after {
    position: absolute;
    display: block;
    content: '';
    width: 22px;
    height: 22px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: traslateZ(0);
    -ms-transform: traslateZ(0);
    transform: traslateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 34px 34px;
    -ms-transform-origin: 34px 34px;
    transform-origin: 34px 34px;
    -webkit-animation: 5.1s ease-in-out 1.6s infinite rotate;
    animation: 5.1s ease-in-out 1.6s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .sparkle-9 {
    position: absolute;
    top: 38px;
    left: 38px;
    width: 16px;
    height: 16px;
    -webkit-transform: rotate(234deg);
    -ms-transform: rotate(234deg);
    transform: rotate(234deg);
    -webkit-border-radius: 50%;
    border-radius: 50%
}
 
.preloader .sparkle-9:after {
    position: absolute;
    display: block;
    content: '';
    width: 23px;
    height: 23px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: traslateZ(0);
    -ms-transform: traslateZ(0);
    transform: traslateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 32px 32px;
    -ms-transform-origin: 32px 32px;
    transform-origin: 32px 32px;
    -webkit-animation: 5.3s ease-in-out 1.8s infinite rotate;
    animation: 5.3s ease-in-out 1.8s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
.preloader .sparkle-10 {
    position: absolute;
    top: 38px;
    left: 38px;
    width: 17px;
    height: 17px;
    -webkit-transform: rotate(105deg);
    -ms-transform: rotate(105deg);
    transform: rotate(105deg);
    -webkit-border-radius: 50%;
    border-radius: 50%
}
 
.preloader .sparkle-10:after {
    position: absolute;
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: traslateZ(0);
    -ms-transform: traslateZ(0);
    transform: traslateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 30px 30px;
    -ms-transform-origin: 30px 30px;
    transform-origin: 30px 30px;
    -webkit-animation: 5.5s ease-in-out 2s infinite rotate;
    animation: 5.5s ease-in-out 2s infinite rotate;
    -webkit-filter: blur(5px);
    filter: blur(5px)
}
 
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0) translate3d(0,0,0);
        transform: rotate(0) translate3d(0,0,0)
    }
 
    to {
        -webkit-transform: rotate(360deg) translate3d(0,0,0);
        transform: rotate(360deg) translate3d(0,0,0)
    }
}
 
@keyframes rotate {
    from {
        -webkit-transform: rotate(0) translate3d(0,0,0);
        transform: rotate(0) translate3d(0,0,0)
    }
 
    to {
        -webkit-transform: rotate(360deg) translate3d(0,0,0);
        transform: rotate(360deg) translate3d(0,0,0)
    }
}