Flickr Loading Indicator Animation

Flickr iOS App loading indicator in HTML/CSS.Changing z-index to create illusion of third dimension.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Flickr Loading Indicator Animation</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  padding: 30px;
  text-align: center;
}

.loader {
  position: relative;
  width: 40px;
  height: 20px;
  border-radius: 10px;
  border: 15px solid transparent;
  background: #3d3f3c;
  margin: 0 auto;
}

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

.dot-pink {
  background: #ff2e92;
  left: -2px;
}

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

@keyframes pink {
  0% {
    z-index: 1;
  }
  50% {
    transform: translateX(24px);
  }
}
@keyframes blue {
  50% {
    transform: translateX(-24px);
  }
}
[rel=me] {
  font-size: 90%;
  text-decoration: none;
  color: white;
  opacity: 0.3;
  background: #00aced;
  padding: 0.2em 0.7em;
  border-radius: 1em;
  text-shadow: 0 0 2px #0087ba;
  font-weight: 100;
  transition: opacity 250ms;
}
[rel=me]:before {
  content: "t ";
  font-family: icon;
  font-size: 90%;
}
[rel=me]:hover {
  opacity: 1;
}

@font-face {
  font-family: icon;
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5802/icons.woff");
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <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>

<a href="https://twitter.com/beau" rel="me">beau</a>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  padding: 30px;
  text-align: center;
}

.loader {
  position: relative;
  width: 40px;
  height: 20px;
  border-radius: 10px;
  border: 15px solid transparent;
  background: #3d3f3c;
  margin: 0 auto;
}

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

.dot-pink {
  background: #ff2e92;
  left: -2px;
}

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

@keyframes pink {
  0% {
    z-index: 1;
  }
  50% {
    transform: translateX(24px);
  }
}
@keyframes blue {
  50% {
    transform: translateX(-24px);
  }
}
[rel=me] {
  font-size: 90%;
  text-decoration: none;
  color: white;
  opacity: 0.3;
  background: #00aced;
  padding: 0.2em 0.7em;
  border-radius: 1em;
  text-shadow: 0 0 2px #0087ba;
  font-weight: 100;
  transition: opacity 250ms;
}
[rel=me]:before {
  content: "t ";
  font-family: icon;
  font-size: 90%;
}
[rel=me]:hover {
  opacity: 1;
}

@font-face {
  font-family: icon;
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5802/icons.woff");
}
/* Downloaded from https://www.codeseek.co/ */
// @beau

This awesome code ( Flickr Loading Indicator Animation ) is write by Beau Smith, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Beau Smith