gooey loader

loader.html

<div class="loader-wrapper">
  <div class="loader dot dot--big">
    <div class="dot dot--small"></div>
  </div>
  <svg width="0px" height="0px">
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7" 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 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </svg>
</div>

<style>
/*! Preloader */
.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  background: #4b5766;
  opacity: 1;
  transition: all .3s ease-in-out;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@-webkit-keyframes color {
  0% {
    background-color: #af3dff;
    box-shadow: 0 0 30px #af3dff;
  }
  25% {
    background-color: #1da2fc;
    box-shadow: 0 0 30px #1da2fc;
  }
  50% {
    background-color: #a6fd29;
    box-shadow: 0 0 30px #a6fd29;
  }
  75% {
    background-color: #ff3b94;
    box-shadow: 0 0 30px #ff3b94;
  }
  100% {
    background-color: #af3dff;
    box-shadow: 0 0 30px #af3dff;
  }
}
@keyframes color {
  0% {
    background-color: #af3dff;
    box-shadow: 0 0 30px #af3dff;
  }
  25% {
    background-color: #1da2fc;
    box-shadow: 0 0 30px #1da2fc;
  }
  50% {
    background-color: #a6fd29;
    box-shadow: 0 0 30px #a6fd29;
  }
  75% {
    background-color: #ff3b94;
    box-shadow: 0 0 30px #ff3b94;
  }
  100% {
    background-color: #af3dff;
    box-shadow: 0 0 30px #af3dff;
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
            transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
            transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@-webkit-keyframes circulate {
  0% {
    -webkit-transform: rotate(0deg) translate(-50%, -50%) rotate(0deg);
            transform: rotate(0deg) translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(1440deg) translate(-50%, -50%) rotate(-1440deg);
            transform: rotate(1440deg) translate(-50%, -50%) rotate(-1440deg);
  }
}
@keyframes circulate {
  0% {
    -webkit-transform: rotate(0deg) translate(-50%, -50%) rotate(0deg);
            transform: rotate(0deg) translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(1440deg) translate(-50%, -50%) rotate(-1440deg);
            transform: rotate(1440deg) translate(-50%, -50%) rotate(-1440deg);
  }
}
.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-filter: url('#goo');
          filter: url('#goo');
}
.dot--big {
  width: 40px;
  height: 40px;
  -webkit-animation: rotate 4s 0s infinite linear, color 4s 0s ease infinite;
          animation: rotate 4s 0s infinite linear, color 4s 0s ease infinite;
}
.dot--small {
  width: 30px;
  height: 30px;
  -webkit-animation: circulate 4s 0s infinite linear, color 4s 0s ease infinite;
          animation: circulate 4s 0s infinite linear, color 4s 0s ease infinite;
}

body {
  position: relative;
}

</style>