console
<div class="loader">
<div class="shadow"></div>
<div class="box"></div>
</div>
body {
background: #6997DB;
overflow: hidden;
}
.loader{
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
.box{
height: 50px;
width: 50px;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
border-radius: 3px;
animation: animate 0.5s linear infinite;
}
@keyframes animate{
17% { border-bottom-right-radius: 3px; }
25% { transform: translateY(9px) rotate(22.5deg); }
50% {
transform: translateY(18px) scale(1,.9) rotate(45deg) ;
border-bottom-right-radius: 40px;
}
75% { transform: translateY(9px) rotate(67.5deg); }
100% { transform: translateY(0) rotate(90deg); }
}
.shadow{
width: 50px;
height: 5px;
background-color: #000;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
opacity: 0.1;
animation: shadow 0.5s linear infinite;
}
@keyframes shadow{
50% {
transform: scale(1.2,1);
}
}