Flickr Loading Indicator Animation

In this example below you will see how to do a Flickr Loading Indicator Animation with some HTML / CSS and Javascript

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

Thumbnail
This awesome code was written by beau, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright beau ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/beau/flickr-loading-indicator-animation-aAxDy */
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/flickr-loading-indicator-animation-aAxDy */
// @beau

Comments