A little loading bar. ~
Thanks to @Alexis Doreau for this awesome design. https://dribbble.com/shots/2156764-Scanner-Gooey-Effect-Firefly-Loader
A little loading bar. ~
Thanks to @Alexis Doreau for this awesome design. https://dribbble.com/shots/2156764-Scanner-Gooey-Effect-Firefly-Loader
<div class="loader"> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
</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 19 -9" result="goo" /> | |
<feComposite in="SourceGraphic" in2="goo" operator="atop"/> | |
</filter> | |
</defs> | |
</svg> |
html, body | |
background: #001D30 | |
height: 100% | |
body | |
display: flex | |
align-items: center | |
justify-content: center | |
div.loader | |
display: inherit | |
width: 350px | |
position: relative | |
justify-content: space-between | |
filter: url(#goo) | |
&:before | |
content: '' | |
z-index: 1 | |
background: #50fcf4 | |
position: absolute | |
top: 50% | |
left: 50% | |
width: 40px | |
height: 40px | |
box-shadow: 0 0 40px #50fcf4 | |
transform: translate(-50%, -50%) | |
animation: loading 1.5s infinite alternate ease-in-out | |
filter: blur(15px) | |
@keyframes loading | |
0% | |
left: 0 | |
100% | |
left: 100% | |
> span | |
display: block | |
width: 50px | |
height: 50px | |
&:before, | |
> span | |
background: #4DB9FF | |
border-radius: 100% | |
svg | |
display: none |