vue 加载组件

<template>
	<view>
		<view class="loadingProgress" v-if="show">
			<view class="info u-flex u-flex-column u-flex-center">
				<view class="bgBox u-flex-xy-center">
					<view class="u-flex u-flex-column">
						<!-- <view class="num">{{percentage}}%</view> -->
						<view class="hm u-p-t-10">{{ statusStr }}</view>
					</view>
					<view class="spinner">
					    <view :class="'bar'+(index+1)" v-for="(item,index) in 36" :key="index"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
const props = defineProps({
  show: {
    type: Boolean,
    required: false,
  },
  statusStr: {
    type: String,
    default: "",
  }
});
const statusStr = computed(() => {
  return props.statusStr;
});
</script>
<style lang="scss" scoped>
.loadingProgress{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999998;
	background: rgba(0, 0, 0, .5);
}
.trusteeship{
	height: 40px;
	padding: 0 20px;
	border-radius: 40px;
	border: 1px solid #fff;
}
.info{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%) translateY(-50%);
	z-index: 999999;
}
.bgBox{
	width: 375px;
	height: 375px;
	display: flex;
  flex-direction: row;
  justify-content: center;	
	// background-image: radial-gradient(circle, #0075FF 0%, #000000 70%);
	.num{
		font-size: 48px;
		color: #78E2FA;
	}
	.hm{
		color: #00D1FF;
		font-size: 28px;
	}
}

.spinner {
	position: relative;
	width: 200px;
	height: 200px;
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	margin-top: -120px;
}
.spinner>view {
	width: 4px;
	height: 20px;
	background: #fff;
	position: absolute;
	left: 100px;
	top: 100px;
	opacity:1;
	-webkit-animation: fade 3s linear infinite;
	border-radius: 4rpx;
}
.spinner .bar1 {-webkit-transform:rotate(0deg) translate(0, -500%); -webkit-animation-delay: 0s;}
.spinner .bar2 {-webkit-transform:rotate(10deg) translate(0, -500%); -webkit-animation-delay: -2.9167s;}
.spinner .bar3 {-webkit-transform:rotate(20deg) translate(0, -500%); -webkit-animation-delay: -2.833s;}
.spinner .bar4 {-webkit-transform:rotate(30deg) translate(0, -500%); -webkit-animation-delay: -2.75s;}
.spinner .bar5 {-webkit-transform:rotate(40deg) translate(0, -500%); -webkit-animation-delay: -2.667s;}
.spinner .bar6 {-webkit-transform:rotate(50deg) translate(0, -500%); -webkit-animation-delay: -2.5833s;}
.spinner .bar7 {-webkit-transform:rotate(60deg) translate(0, -500%); -webkit-animation-delay: -2.5s;}
.spinner .bar8 {-webkit-transform:rotate(70deg) translate(0, -500%); -webkit-animation-delay: -2.41667s;}
.spinner .bar9 {-webkit-transform:rotate(80deg) translate(0, -500%); -webkit-animation-delay: -2.333s;}
.spinner .bar10 {-webkit-transform:rotate(90deg) translate(0, -500%); -webkit-animation-delay: -2.25s;}
.spinner .bar11 {-webkit-transform:rotate(100deg) translate(0, -500%); -webkit-animation-delay: -2.1667s;}
.spinner .bar12 {-webkit-transform:rotate(110deg) translate(0, -500%); -webkit-animation-delay: -2.0833s;}
.spinner .bar13 {-webkit-transform:rotate(120deg) translate(0, -500%); -webkit-animation-delay: -2s;}
.spinner .bar14 {-webkit-transform:rotate(130deg) translate(0, -500%); -webkit-animation-delay: -1.9167s;}
.spinner .bar15 {-webkit-transform:rotate(140deg) translate(0, -500%); -webkit-animation-delay: -1.833s;}
.spinner .bar16 {-webkit-transform:rotate(150deg) translate(0, -500%); -webkit-animation-delay: -1.75s;}
.spinner .bar17 {-webkit-transform:rotate(160deg) translate(0, -500%); -webkit-animation-delay: -1.667s;}
.spinner .bar18 {-webkit-transform:rotate(170deg) translate(0, -500%); -webkit-animation-delay: -1.5833s;}
.spinner .bar19 {-webkit-transform:rotate(180deg) translate(0, -500%); -webkit-animation-delay: -1.5s;}
.spinner .bar20 {-webkit-transform:rotate(190deg) translate(0, -500%); -webkit-animation-delay: -1.41667s;}
.spinner .bar21 {-webkit-transform:rotate(200deg) translate(0, -500%); -webkit-animation-delay: -1.333s;}
.spinner .bar22 {-webkit-transform:rotate(210deg) translate(0, -500%); -webkit-animation-delay: -1.25s;}
.spinner .bar23 {-webkit-transform:rotate(220deg) translate(0, -500%); -webkit-animation-delay: -1.1667s;}
.spinner .bar24 {-webkit-transform:rotate(230deg) translate(0, -500%); -webkit-animation-delay: -1.0833s;}
.spinner .bar25 {-webkit-transform:rotate(240deg) translate(0, -500%); -webkit-animation-delay: -1s;}
.spinner .bar26 {-webkit-transform:rotate(250deg) translate(0, -500%); -webkit-animation-delay: -0.9167s;}
.spinner .bar27 {-webkit-transform:rotate(260deg) translate(0, -500%); -webkit-animation-delay: -0.833s;}
.spinner .bar28 {-webkit-transform:rotate(270deg) translate(0, -500%); -webkit-animation-delay: -0.75s;}
.spinner .bar29 {-webkit-transform:rotate(280deg) translate(0, -500%); -webkit-animation-delay: -0.667s;}
.spinner .bar30 {-webkit-transform:rotate(290deg) translate(0, -500%); -webkit-animation-delay: -0.5833s;}
.spinner .bar31 {-webkit-transform:rotate(300deg) translate(0, -500%); -webkit-animation-delay: -0.5s;}
.spinner .bar32 {-webkit-transform:rotate(310deg) translate(0, -500%); -webkit-animation-delay: -0.41667s;}
.spinner .bar33 {-webkit-transform:rotate(320deg) translate(0, -500%); -webkit-animation-delay: -0.333s;}
.spinner .bar34 {-webkit-transform:rotate(330deg) translate(0, -500%); -webkit-animation-delay: -0.25s;}
.spinner .bar35 {-webkit-transform:rotate(340deg) translate(0, -500%); -webkit-animation-delay: -0.1667s;}
.spinner .bar36 {-webkit-transform:rotate(350deg) translate(0, -500%); -webkit-animation-delay: -0.0833s;}
@-webkit-keyframes fade {
	from {opacity:1;}
	to {opacity: 0.25;}
}
</style>