<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
height: 30px;
background: pink;
width: 55px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 5px 0;
}
li {
list-style: none;
width: 5px;
height: 30px;
background: #fff;
float: left;
margin-left: 5px;
animation: one 0.5s infinite;
transform: scaleY(0.2)
}
li:nth-child(1){animation-delay:0.1s;}
li:nth-child(2){animation-delay:0.2s;}
li:nth-child(3){animation-delay:0.3s;}
li:nth-child(4){animation-delay:0.4s;}
li:nth-child(5){animation-delay:0.5s;}
@keyframes one{
0%{transform:scaleY(0.2)}
50%{transform:scaleY(1)}
100%{transform:scaleY(0.2)}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
