fs-uni-template/components/fs-loading/fs-loading.vue

<template>
	<view class="fs-loading" :style="{ backgroundColor: bgColor }">
		<view>
			<view class="loader"></view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
/**
 * 加载组件
 * @description 加载组件
 * @property {String} bgColor 背景色
 */
export default {
	name: 'fs-loading'
}
</script>

<script setup>
const props = defineProps({
	bgColor: {
		type: String,
		default: 'rgba(0,0,0,.5)'
	}
})
</script>

<style lang="scss" scoped>
.fs-loading {
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	z-index: 20;
}
.loader {
	margin: 0 auto 20rpx;
	font-size: 12rpx;
	position: relative;
	border-top: 1em solid rgba(255, 255, 255, 0.2);
	border-right: 1em solid rgba(255, 255, 255, 0.2);
	border-bottom: 1em solid rgba(255, 255, 255, 0.2);
	border-left: 1em solid #fff;
	animation: load8 1s infinite linear;
}
.loader,
.loader:after {
	border-radius: 50%;
	width: 10em;
	height: 10em;
}

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