这是第二个 CSS 3 实现的加载中动画：
这是互联网上比较常见的一种加载动画，我在很多软件应用中都见过，具体设计来源不明。实现原理和第一个动画类似，把整个动画拆分成多个线条块水平放置在一起，然后自左向右地依次执行上下拉伸变换，经过无限重复就得到了最终的效果，下面是代码：
body {
background: #999999;
}
.DIV_loadingAnimation2 {
position: fixed;
height: 50px;
font-size: 0;
}
.DIV_loadingAnimation2 div {
width: 10px;
height: 50px;
background: white;
display: inline-block;
margin: 0 1px 0 0;
transform: scaleY(.5);
}
.DIV_loadingAnimation2 div:nth-child(1) {
animation: loadingAnimation2 1.5s linear infinite;
}
.DIV_loadingAnimation2 div:nth-child(2) {
animation: loadingAnimation2 1.5s linear infinite .125s;
}
.DIV_loadingAnimation2 div:nth-child(3) {
animation: loadingAnimation2 1.5s linear infinite .25s;
}
.DIV_loadingAnimation2 div:nth-child(4) {
animation: loadingAnimation2 1.5s linear infinite .375s;
}
.DIV_loadingAnimation2 div:nth-child(5) {
animation: loadingAnimation2 1.5s linear infinite .5s;
}
.DIV_loadingAnimation2 div:nth-child(6) {
animation: loadingAnimation2 1.5s linear infinite .625s;
}
.DIV_loadingAnimation2 div:nth-child(7) {
animation: loadingAnimation2 1.5s linear infinite .75s;
}
.DIV_loadingAnimation2 div:nth-child(8) {
animation: loadingAnimation2 1.5s linear infinite .875s;
}
@keyframes loadingAnimation2 {
0% {
transform: scaleY(.5);
}
20% {
transform: scaleY(1);
}
40% {
transform: scaleY(.5);
}
}