<html>
<head>
<style>
.spin-loading {
position: fixed;
height: 100%;
width: 100%;
background: #fff;
z-index: 10000;
top: 0;
left: 0;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -30px;
width: 50px;
height: 60px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #1887e0;
height: 100%;
width: 6px;
display: inline-block;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
animation-delay: -1.1s;
}
.spinner .rect3 {
animation-delay: -1s;
}
.spinner .rect4 {
animation-delay: -0.9s;
}
.spinner .rect5 {
animation-delay: -0.8s;
}
@keyframes stretchdelay {
0%,
40%,
to {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
}
</style>
</head>
<body>
<div class="spin-loading">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
</body>
</html>
```