<template>
    <div class="loading"><span class="loader-53"> </span></div>
</template>

<style lang="less" scoped>
.loading {
    display: flex;
    justify-content: center;
    padding: 50px 0;
}
.loader-53 {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    background: linear-gradient(0deg, #fffecb 0%, #ffb178 100%);
    border-radius: 4px;
    -webkit-animation: flipX 2s linear infinite;
    animation: flipX 2s linear infinite;
}

@-webkit-keyframes flipX {
    0% {
        transform: perspective(200px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(200px) rotateX(-360deg) rotateY(0deg);
    }
    100% {
        transform: perspective(200px) rotateX(-360deg) rotateY(-360deg);
    }
}
@keyframes flipX {
    0% {
        transform: perspective(200px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(200px) rotateX(-360deg) rotateY(0deg);
    }
    100% {
        transform: perspective(200px) rotateX(-360deg) rotateY(-360deg);
    }
}
</style>
