<h1>Animated CSS Loader</h1>

<div class="bubbles">
  <span></span>
  <span id="bubble2"></span>
  <span id="bubble3"></span>
</div>

@import "compass/css3";

@import url('https://fonts.googleapis.com/css?family=Gafata');

/* Colors */
$bg: #FDF6E3;
$text: #A75F63;
$terra-rosa: #FE576C;

/* Mixins */
@mixin border-radius($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

/* Styles */
html, body {
  background: $bg;
  text-align: center;
  margin: 20px 0;
}

h1 {
  font-family: 'Gafata', 'Lucida Grande', Tahoma, Verdana, sans-serif;
  font-size: 2.1875rem;
  font-weight: 100;
  color: $text;
  text-shadow: 0 1px 1px white;
}

.bubbles span {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  margin: 150px auto;
  background: $terra-rosa;
  @include border-radius(50%);
  animation: bubbly .9s infinite alternate;
}

/* Bubbles */
#bubble2 { animation-delay: .27s; }
#bubble3 { animation-delay: .54s; }

@-webkit-keyframes bubbly {
  0% {
    width: 15px;
    height: 15px;
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    width: 50px;
    height: 50px;
    opacity: 0.1;
    transform: translateY(-32px);
  }
}

@-moz-keyframes bubbly {
  0% {
    width: 15px;
    height: 15px;
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    width: 50px;
    height: 50px;
    opacity: 0.1;
    transform: translateY(-32px);
  }
}

// No JS!!!