A Pen by Stephen Zuniga.

Bubbly-Load-Animation.markdown

Bubbly Load Animation

A Pen by Stephen Zuniga on CodePen.

License.

index.slim

.bubble-loader
  .1
  .2
  .3
  .4
  .5

style.scss

@import "compass";
body {
  background: #252525;
  text-align: center;
}
.bubble-loader {
  display: inline-block;
  margin-top: 25px;

  div {
    animation: bubble 1100ms forwards infinite;
    background: #0cffff;
    border-radius: 50%;
    box-shadow: 0 0 8px #0abab5;
    display: inline-block;
    height: 10px;
    margin: 6px;
    transform: scale(0, 0);
    width: 10px;

    &:nth-child(2),
    &:nth-child(4) {
      animation-delay: 125ms;
    }
    &:nth-child(1),
    &:nth-child(5) {
      animation-delay: 250ms;
    }
  }
}
@keyframes bubble {
  0%   { transform: scale(0, 0); }
  12%  { transform: scale(1.5, 1.5); }
  23%  { transform: scale(0.5, 0.5); }
  34%  { transform: scale(1.2, 1.2); }
  45%  { transform: scale(1, 1); }
  85%  { transform: scale(0, 0); }
}