用CSS实现一个类似手风琴的加载中效果

样式预览：https://www.aliyundrive.com/s/jK7nPeDVg5f
废话不多说，直接上代码：
HTML代码
一个父级元素包含五个子元素

<div class="loader">
    <div class="slider" style="--i:0"></div>
    <div class="slider" style="--i:1"></div>
    <div class="slider" style="--i:2"></div>
    <div class="slider" style="--i:3"></div>
    <div class="slider" style="--i:4"></div>
</div>

CSS代码

/*设置父元素的内容垂直水平居中*/
.loader {
    display:flex;
    align-items:center;
    justify-content: center;
}
/*子元素的样式*/
.loader .slider {
    background-color:#ffffff;
    border:1px solid ragb(128,128,128,0.276);
    height:80px;
    width:20px;
    margin:0 15px;
    border-radius:30px;
    box-shadow:inset -5px -5px 10px #0000001a,
    inset 5px 5px 10px #0000001a;
    position: relative;
    overflow: hidden;
}
.loader .slider::before{
    content:"";
    position: absolute;
    top:0;
    left:0;
    height:80px;
    width:20px;
    background:#2697f3;
    animation: animate_2 2.5s ease-in-out infinite;
    animation-delay: calc(-0.5s*var(--i));
}
@keyframes animate_2 {
    0%{
        transform: translateY(80px);
        filter:hue-rotate(0deg);
    }
    50%{
        transform: translateY(20px);
    }
    100%{
        transform: translateY(80px);
        filter:hue-rotate(360deg);
    }
}
.loader-text{
    padding: 10px ;
    text-align: center;
}