<div class="bar">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<svg>
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" 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" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
  	</filter>
  </defs>
</svg>
$color: #59617b;
$diam:  21px;
$dots:  3;
$time:  1.35s;
$cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);

html, body { height: 100%; }

.bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 50%;
  width: 100%;
  background: $color;
  filter: url('#goo');
}

  .dot {
    position: absolute;
    top: $diam/4;
    height: $diam;
    width: $diam;
    margin-left: -$diam/2;
    
    background: $color;
    border-radius: 50%;
    
    @for $i from 1 through $dots {
      &:nth-of-type(#{$i}) {
        left: 30% + $i*10;
        animation: bounce#{$i} $time .105s*$i $cubic infinite;
      }
    }
  }

@keyframes bounce1 {
  38% { transform: translateY(-$diam*4.2); }
  50%, 70% { transform: translateY(-$diam*4); }
}

@keyframes bounce2 {
  50%, 70% { transform: translateY(-$diam*4); }
}

@keyframes bounce3 {
  50% { transform: translateY(-$diam*4); }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.