<template>
   <view class="box" >
      <view class="loading1"></view>
   </view>
</template>

<script>
export default {
    name: 'loading',
    watch: {
        isShowLoading: {
            handler(val) {
                console.log(val)
            }
        }
    },
    components: {
        options: {
            Loading: true
        }
    },
    onLoad() {
        console.log('isShowLoading', this.isShowLoading)
    }
}
</script>

<style scoped>

.box {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 200rpx;
    height: 200rpx;
    background: rgba(0,0,0,0.4);
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    z-index:9
}
.loading1 {
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 100%;
    animation: circle1 infinite 0.75s linear;
}
@keyframes circle1 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>
