Goey Loader

HTML
<div class="wrapper"> <ul> <li class="fixe"></li> <li></li> <li></li> </ul> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" 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> </defs> </svg>
CSS
html, body { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #B24592; background: -webkit-linear-gradient(to left, #B24592 , #F15F79); background: linear-gradient(to left, #B24592 , #F15F79); } .wrapper { position: relative; } ul { display: block; padding: 0; font-size: 0; filter:url('#goo'); text-align: center; width: 400px; } li { font-size: 0; display: inline-block; border-radius: 50%; width: 30px; height: 30px; margin: 10px; background: #fff; transform: translateX(-120px); animation: dance infinite 3s ease-in-out; } li.fixe { position: absolute; /* background: red; */ left: 50%; transform: translateX(-83%) scale(2); animation: bounce infinite 3s cubic-bezier(0.5, -0.96, 0.53, 1.95); } @keyframes dance { 50% { transform: translateX(120px); } } @keyframes bounce { 50% { transform: translateX(-83%) scale(2); } 25%, 75% { transform: translateX(-83%) scale(3); } }
JAVASCRIPT
Expand for more options Login