CSS加载动画

CSS加载动画
<template>
    <div id="main">

        <div class="middle_box">
            <div class="animations">
                <span style="height:20px"></span>
                <span style="height:20px"></span>
                <span style="height:20px"></span>
                <span style="height:20px"></span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {

            }
        },
        mounted:function(){


        },
        methods:{

        }
    }
</script>
<style scoped>
    #main{
        height:100%;
        width: 100%;
        color:white;
    }
    .bottom{
        width:40%;
        position: fixed;
        bottom:0;
        left:5%;
    }
    .middle_box{
        width:100%;
        height:50px;
        position: fixed;
        top:calc(50% - 50px);
    }
    .animations{
        display: flex;
        justify-content:space-around;
        flex-direction: row;
        align-items: center;
        width: 40%;
        height:50px;
        margin-left:30%;
    }
    .animations span{
        background-color: red;
        width: 1rem;
        border-radius: 10px;
        -webkit-animation: stretchdelay 1.2s infinite ease-out;
        animation: stretchdelay 1.2s  infinite ease-out;
    }
    .animations span:nth-of-type(2){
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }
    .animations span:nth-of-type(3){
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }
    .animations span:nth-of-type(4){
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }


    @-webkit-keyframes stretchdelay {
        0%{
            height:20px;
        }
        50%{
            height:50px;
        }
        100%{
            height:20px;
        }
    }

    @keyframes stretchdelay {
        0%{
            height:20px;
        }
        50%{
            height:50px;
        }
        100%{
            height:20px;
        }
    }

</style>