zhxy-desk/components/loading.vue

//loading组件
<template>
    <view v-if="loading" class="loading_container">
        <view  class="loading">
            <view class="loading_a"></view>
            <view class="loading_b"></view>
            <view class="loading_c"></view>
        </view>
    </view>
</template>
 
<script>
export default {
    props:{
        loading:{
            type:Boolean
        }
    }
};
</script>
 
<style scoped>
.loading_container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:#fff;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes ball-beat {
    50% {
        opacity: 0.2;
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.loading {
    width: 200rpx;
    margin-top: -36rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.loading_a,
.loading_b,
.loading_c {
    width: 40rpx;
    height: 40rpx;
    margin: 10rpx;
    display: inline-block;
    -webkit-animation: ball-beat 0.7s 0s infinite linear;
    animation: ball-beat 0.7s 0s infinite linear;
    background-color: #5096fa;
    border-radius: 100%;
}
.loading_b {
    -webkit-animation-delay: -0.35s !important;
    animation-delay: -0.35s !important;
}
</style>