qjkankan_shibadongcun/packages/qjkankan-editor/src/components/shared/loading/smallWaiting1.vue

<template>
    <popup ref="Message" v-if="display">
        <div class="ui-waiting">
            <div class="txt">{{lodingtxt}}</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";
import { i18n } from "@/lang"
export default {
    name: "ui-waiting",
    components: {
        Popup
    },
    data() {
        return {
            display: false,
            duration: 0,
        };
    },
    computed:{
        lodingtxt(){
            return i18n.t(`gather.loading`)
        }
    },
    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;
    .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;
        }
    }
}
</style>