<div class="loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
/**
* Document defaults (don't copy these).
*/
body {
text-align: center;
background-color: #eee;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* The loader container */
.loader {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
}
/* The dot */
.loader > .dot {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
width: 160px;
height: 100px;
margin-top: -50px;
margin-left: -80px;
border-radius: 5px;
background-color: #1e3f57;
transform-type: preserve-3d;
animation: dot1 3s cubic-bezier(.55,.3,.24,.99) infinite;
}
.loader > .dot:nth-child(2) {
z-index: 11;
width: 150px;
height: 90px;
margin-top: -45px;
margin-left: -75px;
border-radius: 3px;
background-color: #3c617d;
animation-name: dot2;
}
.loader > .dot:nth-child(3) {
z-index: 12;
width: 40px;
height: 20px;
margin-top: 50px;
margin-left: -20px;
border-radius: 0 0 5px 5px;
background-color: #6bb2cd;
animation-name: dot3;
}
@keyframes dot1 {
3%, 97% {
width: 160px;
height: 100px;
margin-top: -50px;
margin-left: -80px;
}
30%, 36% {
width: 80px;
height: 120px;
margin-top: -60px;
margin-left: -40px;
}
63%, 69% {
width: 40px;
height: 80px;
margin-top: -40px;
margin-left: -20px;
}
}
@keyframes dot2 {
3%, 97% {
width: 150px;
height: 90px;
margin-top: -45px;
margin-left: -75px;
}
30%, 36% {
width: 70px;
height: 96px;
margin-top: -48px;
margin-left: -35px;
}
63%, 69% {
width: 32px;
height: 60px;
margin-top: -30px;
margin-left: -16px;
}
}
@keyframes dot3 {
3%, 97% {
width: 40px;
height: 20px;
margin-top: 50px;
margin-left: -20px;
}
30%, 36% {
width: 8px;
height: 8px;
margin-top: 49px;
margin-left: -5px;
border-radius: 8px;
}
63%, 69% {
width: 16px;
height: 4px;
margin-top: -37px;
margin-left: -8px;
border-radius: 10px;
}
}
This Pen doesn't use any external CSS resources.