<div id="container">
  <div id="dot"></div>
	<div class="step" id="s1"></div>
	<div class="step" id="s2"></div>
	<div class="step" id="s3"></div>
</div>
<h4>Loader #2</h4>
body {
	background: #54B4F5;
}
h4 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  font-weight: 200;
  opacity: .5;
	font-family: sans-serif;
  color: #fff;
}
#container {
	margin: -45px -60px;
  width: 120px;
  height: 90px;
  position: absolute;
  top: 50%;
  left: 50%;
}
#dot {
  background: #FFF;
  border-radius: 50%; 
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 30px;
  left: 27px;
  transform-origin: center bottom;
  animation: dot .6s ease-in-out infinite;
}
@-webkit-keyframes dot {
 0% { transform: scale(1,.7) }
 20% { transform: scale(.7,1.2) }
 40% { transform: scale(1,1)} 
 50% { bottom: 100px;} 
 46% { transform: scale(1,1)} 
 80% { transform: scale(.7,1.2) } 
 90% { transform: scale(.7,1.2) } 
 100% { transform: scale(1,.7) }
}
.step {
	position: absolute;
  width: 30px;
  height: 30px;
  border-top: 2px solid #FFF;
	top: 0;
  right:0;
}
@-webkit-keyframes anim { 
	0% { 
    opacity: 0;
    top: 0; 
    right: 0; 
  }
  50% { opacity: 1; }
	100% { 
    top: 90px; 
    right: 90px;
    opacity: 0;
  }
}
#s1 { animation: anim 1.8s linear infinite; }
#s2 { animation: anim 1.8s linear infinite -.6s; }
#s3 { animation: anim 1.8s linear infinite -1.2s; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js