yihuo/components/loading.vue

<template>
    <view v-if="loading.show" class="loading-wrapper flex-column-align-center cu-load load-modal">
        <!-- <view class="loading-box flex-column-align-center" :class="[loading.black && 'black']">
            <image :src="require('@/static/image/loading/out.png')" class="out" />
            <image :src="require('@/static/image/loading/in.png')" class="in" />
            <image :src="require('@/static/image/loading/title.png')" class="title translateXY" />
        </view> -->
    </view>
</template>

<script>

export default {
    computed: {
        loading() {
            return this.$store.state.loading
        }
    }
}
</script>

<style lang="scss" scoped>
.loading-wrapper {
    // background: transparent;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1500;
}

@keyframes circle-1 {
    from {
        transform: rotateZ(360deg);
    }
    to {
        transform: rotateZ(0deg);
    }
}

@keyframes circle-2 {
    from {
        transform: rotateZ(-360deg);
    }
    to {
        transform: rotateZ(0deg);
    }
}

.black {
    background: rgba($color: #000000, $alpha: 0.8);
}
.loading-box {
    width: 300rpx;
    height: 300rpx;
    position: relative;
    border-radius: 20rpx;
    .out {
        width: 232rpx;
        height: 232rpx;
        position: absolute;
        left: 34rpx;
        top: 34rpx;
        animation: circle-1 3s linear infinite;
    }
    .in {
        width: 250rpx;
        height: 250rpx;
        position: absolute;
        left: 25rpx;
        top: 25rpx;
        animation: circle-2 3s linear infinite;
    }
    .title {
        width: 90rpx;
        height: 13rpx;
        position: absolute;
    }
}
</style>