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

body{
 padding: 30px;
}
.flickr-loader {
  position: relative;
  width: 110px;
  height: 50px;
  background:#333;
}

.dot-pink, 
.dot-blue {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  animation: 1s ease-in-out infinite;
}

.dot-pink {
  background: #ff2e92;
  left: 0;
  animation-name: pink;
}

.dot-blue {
 background: #007bdc;
 right: 0;
 animation-name: blue;
}

@keyframes pink {
  0% {
    z-index: 1;
  }
 50% {
    left:50px;
  }
}
@keyframes blue {
  50% {
    right:50px;
  }
}