<template>
    <popup ref="Message" v-if="display">
        <div class="ui-waiting">
            <div class="icon">
                <img :src="require('@/assets/images/loading.png')" alt="">
            </div>
            <div class="txt">加载中</div>
            <!-- <div class="spinner">
                <div class="bounce1"></div>
                <div class="bounce2"></div>
                <div class="bounce3"></div>
            </div> -->
            <!-- <div>请稍等...</div> -->
        </div>
    </popup>
</template>
<script>
import Popup from "../popup";
export default {
    name: "ui-waiting",
    components: {
        Popup
    },
    data() {
        return {
            display: false,
            duration: 0
        };
    },
    methods: {
        show() {
            this.$nextTick(() => (this.display = true));
        },
        hide() {
            this.$nextTick(() => (this.display = false));
        }
    }
};
</script>
<style lang="less" scoped>
.ui-waiting {
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    width: 110px;
    height: 110px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    .icon{
        width: 60px;
        height: 60px;
        position: relative;
        overflow: hidden;
        margin: 10px auto;
        >img{
            height: 60px;
            position: absolute;
            left: 0;
            top: 0;
            animation: loading 1s steps(15) infinite;
        }
    }
    .txt{
        font-size: 14px;
    }
    .spinner {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
        > div {
            width: 5px;
            height: 5px;
            background-color: #fff;
            margin: 5px;
            border-radius: 100%;
            display: inline-block;
            animation: bouncedelay 1.4s infinite ease-in-out;
            animation-fill-mode: both;
        }

        .bounce1 {
            animation-delay: -0.32s;
        }
        .bounce2 {
            animation-delay: -0.16s;
        }
    }

    
}
@keyframes loading {
  100% {
    left: -900px;
  }
}
</style>