几种简单的css加载等待点击动画

<div class="bg">
        <div class='wiat'>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

.bg {
   
        margin: 5px;
        width: 200px;
        height: 200px;
        background-color: lightcoral;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wiat {
   
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wiat div {
   
        margin: 5px;
        width: 20px;
        height: 30px;
        border-radius: 10px;
        background-color: lightblue;
        animation: wiat 1.75s infinite;
    }

    @keyframes wiat {
   
        50% {
   
            height: 60px;
        }
    }

    .wiat div:nth-child(1) {
   
        animation-delay: 0.3s;
    }

    .wiat div:nth-child(2) {
   
        animation-delay: 0.6s;
    }

    .wiat div:nth-child(3) {
   
        animation-delay: 0.9s;
    }

    .wiat div:nth-child(4) {
   
        animation-delay: 1.2s;
    }

    .wiat div:nth-child(5) {
   
        animation-delay: 1.5s;
    }

<div class="bg">
        <div class="wait2"></div>