index.html

<h1>Flickr Loading Animation</h1>

<div class="loader">
  <i class="dot-pink"></i>
  <i class="dot-blue"></i>
</div>

<p>…as seen in the new Flickr iOS app.</p>

style.sass

@import "compass"
// Constants
$FLICKR_PINK: #ff2e92
$FLICKR_BLUE: #007bdc

// Configuration
$loader-size: 20px // even numbers work best

// Variables
$loader-gutter: $loader-size/10
$loader-transform: $loader-size + $loader-gutter * 2

body
  padding: 30px
  text-align: center

.loader
  position: relative
  width: $loader-size * 2
  height: $loader-size
  border-radius: $loader-size/2
  border: $loader-size * .75 solid transparent
  background: #3d3f3c
  margin: 0 auto

%loader-dot
  position: absolute
  top: 0
  width: $loader-size
  height: $loader-size
  border-radius: 100%
  animation: pink 1.05s ease-in-out infinite

.dot-pink
  @extend %loader-dot
  background: $FLICKR_PINK
  left: -$loader-gutter

.dot-blue
  @extend %loader-dot
  animation-name: blue
  background: $FLICKR_BLUE
  right: -$loader-gutter

@keyframes pink
  0%
    z-index: 1
  50%
    transform: translateX($loader-transform)

@keyframes blue
  50%
    transform: translateX(-$loader-transform)