使用html和css实现超赞的屏幕loading

<div class="middle">
     <div class="bar bar1"></div>
     <div class="bar bar2"></div>
     <div class="bar bar3"></div>
     <div class="bar bar4"></div>
     <div class="bar bar5"></div>
     <div class="bar bar6"></div>
     <div class="bar bar7"></div>
     <div class="bar bar8"></div>
</div>

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #000;
}
.middle{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.bar{
    width: 10px;
    height: 70px;
    background: #fff;
    display: inline-block;
    transform-origin: bottom center;
    border-top-left-radius:20% ;
    border-top-right-radius:20%;
    animation: loader 1.2s linear infinite;
}
.bar1{
    animation-delay: 0.1s;
}
.bar2{
    animation-delay: 0.2s;
}
.bar3{
    animation-delay: 0.3s;
}
.bar4{
    animation-delay: 0.4s;
}
.bar5{
    animation-delay: 0.5s;
}
.bar6{
    animation-delay: 0.6s;
}
.bar7{
    animation-delay: 0.7s;
}
.bar8{
    animation-delay: 0.8s;
}
@keyframes loader {
    0%{
        transform: scaleY(0.1);
        background: #fff;
    }
    50%{
        transform: scaleY(1);
        background: yellowgreen;
    }
    100%{
        transform: scaleY(0.1);
        background: transparent;
    }
}