Blue Loading Bubbles

by Mark

HTML

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

CSS

html {
    text-align: center;
}

.bubbles span {
  display: inline-block;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  margin: 0.975em auto;
  background: #528AE8;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  animation: bubbly 0.9s infinite alternate;
  -webkit-animation: bubbly 0.9s infinite alternate;  -- reference function for Chrome
}

#bubble2 {
  -webkit-animation-delay: 0.27s; } /* reference function for Chrome */

#bubble3 {
  -webkit-animation-delay: 0.54s; } /* reference function for Chrome */

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

  100% {
    width: 50px;
    height: 50px;
    opacity: 0.1;
    transform: translateY(-32px); } }