<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>
vue 加载组件
最新推荐文章于 2024-04-29 09:30:00 发布