<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

ul {
  position: absolute;
	margin: auto;
	top: 0; left: 0; bottom: 0; right: 0;  
  width: 110px;
  height: 150px;
  background: #64fade;
  border-radius: 100px;
  list-style: none;
  overflow: hidden;
}

li {
  position: absolute;
	margin: auto;
	top: 0; left: 0; bottom: 0; right: 0;
  width: 0;
  height: 0;
  border-radius: 100px;
	animation:         zoom 3s cubic-bezier(0.250, 0.100, 0.250, 1.000) infinite;
	-o-animation:      zoom 3s cubic-bezier(0.250, 0.100, 0.250, 1.000) infinite;
	-ms-animation:     zoom 3s cubic-bezier(0.250, 0.100, 0.250, 1.000) infinite;
	-moz-animation:    zoom 3s cubic-bezier(0.250, 0.100, 0.250, 1.000) infinite;
  -webkit-animation: zoom 3s cubic-bezier(0.250, 0.100, 0.250, 1.000) infinite;
}

li:nth-child(1) {
  background: #2cbfa4;
}

li:nth-child(2) {
  background: #218c78;
  animation-delay:         0.2s;
	-o-animation-delay:      0.2s;
	-ms-animation-delay:     0.2s;
	-moz-animation-delay:    0.2s;
  -webkit-animation-delay: 0.2s;
}

li:nth-child(3) {
  background: #166657;
  animation-delay:         0.4s;
	-o-animation-delay:      0.4s;
	-ms-animation-delay:     0.4s;
	-moz-animation-delay:    0.4s;
  -webkit-animation-delay: 0.4s;
}

li:nth-child(4) {
  background: #34403e;
  animation-delay:         0.6s;
	-o-animation-delay:      0.6s;
	-ms-animation-delay:     0.6s;
	-moz-animation-delay:    0.6s;
  -webkit-animation-delay: 0.6s;
}

li:nth-child(5) {
  background: #64fade;
  animation-delay:         0.6s;
	-o-animation-delay:      0.6s;
	-ms-animation-delay:     0.6s;
	-moz-animation-delay:    0.6s;
  -webkit-animation-delay: 0.6s;
}

@keyframes zoom {
	from { width: 0; height: 0; opacity: 1; }
	30%   { width: 100%; height: 100%; }
  90%   { width: 100%; height: 100%; }
  to   { opacity: 0; }
}

@-o-keyframes zoom {
	from { width: 0; height: 0; opacity: 1; }
	30%   { width: 100%; height: 100%; }
  90%   { width: 100%; height: 100%; }
  to   { opacity: 0; }
}

@-moz-keyframes zoom {
	from { width: 0; height: 0; opacity: 1; }
	30%   { width: 100%; height: 100%; }
  90%   { width: 100%; height: 100%; }
  to   { opacity: 0; }
}

@-webkit-keyframes zoom {
	from { width: 0; height: 0; opacity: 1; }
	30%   { width: 100%; height: 100%; }
  90%   { width: 100%; height: 100%; }
  to   { opacity: 0; }
}

// Inspired by http://dribbble.com/shots/1185889-Loading-GIF