<template>
	<view class="loading-body">
		<slot></slot>
		<view class="mask" v-if="loading">
			<u-loading mode="circle"></u-loading>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'ComponentLoading',
		props: {
			loading: {
				type: Boolean,
				default: false
			}
		}
	}
</script>
<style lang="scss" scoped>
	.loading-body {
		position: relative;
		
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 9999;
		}
	}
</style>
