Gooey Loading Bar

Gooey Loading Bar.markdown

Gooey Loading Bar

A little loading bar. ~

Thanks to @Alexis Doreau for this awesome design. https://dribbble.com/shots/2156764-Scanner-Gooey-Effect-Firefly-Loader

A Pen by Kyosuke on CodePen.

License.

index.html

<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>

style.css

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