实现比较简单，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>loading</title>
</head>
<style type="text/css">
.loading{
width: 300px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading span{
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
-webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
0%,100%{
height: 40px;
background: lightgreen;
}
50%{
height: 70px;
margin: -15px 0;
background: lightblue;
}
}
.loading span:nth-child(2){
-webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
-webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
-webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
-webkit-animation-delay:0.8s;
}
.loading2{
width: 300px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
.loading2 span{
display: inline-block;
width: 8px;
height: 8px;
margin: -4px 0;
border-radius: 4px;
background: lightgreen;
animation: load2 1s ease infinite;
}
@keyframes load2{
0%,100%{
border-radius: 4px;
}
50%{
margin: -16px 16px -16px 16px;
transform: scale(4);
}
}
.loading2 span:nth-child(2){
animation-delay:0.2s;
}
.loading2 span:nth-child(3){
animation-delay:0.4s;
}
.loading2 span:nth-child(4){
animation-delay:0.6s;
}
.loading2 span:nth-child(5){
animation-delay:0.8s;
}
</style>
<body>
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loading2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>