TalentService-mobile/components/loading/index.vue
2024-10-31 21:24:54 +08:00

103 lines
1.7 KiB
Vue

<template>
<view class="loader-all" v-if="show">
<view class="loader"></view>
</view>
</template>
<script>
export default {
props:{
show:{
type:Boolean,
default: false
}
},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
@keyframes animloader {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, 0.9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes animloaders {
0%,
100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}
.loader-all{
position: fixed;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 1);
z-index: 9999;
}
.loader {
position: relative;
margin-top: -200rpx;
width: 48px;
height: 48px;
/**
* 阴影层
*/
&::before {
content: "";
position: absolute;
top: calc(100% + 15px);
left: 0;
width: 100%;
height: 5px;
border-radius: 50%;
background: #00afee;
opacity: 0.1;
animation: animloaders .5s linear infinite;
}
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 3px;
background: linear-gradient( 80deg, #4BACFF 0%, rgba(75, 174, 255,0.5) 100%);
animation: animloader .5s linear infinite;
}
}
</style>