Tumblr iOS Loading animation in HTML & CSS

index.html

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

script.js

/* Only works in Chrom ATM */

style.css

*{
    -webkit-transform-style: preserve-3d;
}
body {
    background: #2c4762;
    height:100%;
}

html{
  height: 100%;
}

ul {
  background: #1D2E40;
  border-radius: 10%;
  height: 150px;
  margin: 0 auto;
  list-style-type: none;
  position: relative;
  width: 150px;

  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); 
}

li {
  background: #FFFFFF;
  border-radius: 25%;
  display: block;
  height: 10px;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 10px;
  top: 50%;
  margin-left:-5px;
  margin-top: -5px; 
}

li:nth-child(1) {
  left: 33%;
  -webkit-animation-name: pulsate;  
}

li:nth-child(2) {
  left: 50%;
  -webkit-animation-name: pulsate;
  -webkit-animation-delay: 0.25s;
}

li:nth-child(3) {
  left: 66%;
  -webkit-animation-name: pulsate;
  -webkit-animation-delay: 0.5s; 
}

/* animate */
li{
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite
}

@-webkit-keyframes pulsate {
	0% { -webkit-transform: scale(1); }
	25% { -webkit-transform: scale(1.5); }  
	50% { -webkit-transform: scale(1); }
}

tumblr-ios-loading-animation-in-html-css.markdown

Tumblr iOS Loading animation in HTML & CSS

A Pen by Jaswinder Virdee on CodePen.

License.