Loading....
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="animatedloading.css">
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #f1f1f1;
}
.loading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%) rotate(75deg);
width: 15px;
height: 15px;
}
.loading::before,.loading::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 15px;
height: 15px;
border-radius: 15px;
animation: loading 1.5s infinite linear;
}
.loading::before{
box-shadow: 15px 15px #e77f67, -15px -15px #778beb;
}
.loading::after{
box-shadow: 15px 15px #f8a5c2, -15px -15px #f5cd79;
transform: translate(-50%,-50%) rotate(90deg);
}
@keyframes loading {
50%{
height: 45px;
}
}
</style>
</head>
<body>
<div class="loading"></div>
</body>
</html>