96 lines
1.9 KiB
Vue
96 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="spinner-box" :style="{width: size + 'rpx', height: size + 'rpx'}">
|
||
|
|
<view v-if="show" class="circle-border" :style="{width: size * 0.75 + 'rpx', height: size * 0.75 + 'rpx'}">
|
||
|
|
</view>
|
||
|
|
<view v-else class="circle-border-stop" :style="{width: size * 0.75 + 'rpx', height: size * 0.75 + 'rpx'}"></view>
|
||
|
|
<view class="circle-core" :style="{width: size * 0.75 - 2 + 'rpx', height: size * 0.75 - 2 + 'rpx'}">
|
||
|
|
<image src="/static/images/icon_lock_transparent.png" mode="aspectFill" :style="{width: size * 0.35 + 'rpx',
|
||
|
|
height: size * 0.35 + 'rpx'}"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "SwitchLoading",
|
||
|
|
props:{
|
||
|
|
size: Number,
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
open () {
|
||
|
|
this.show = true
|
||
|
|
},
|
||
|
|
close () {
|
||
|
|
this.show = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@keyframes spin {
|
||
|
|
from {
|
||
|
|
transform: rotate(0);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: rotate(359deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.spinner-box {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
background-color: transparent;
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-border {
|
||
|
|
padding: 3upx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: rgb(99, 184, 175);
|
||
|
|
background: linear-gradient(
|
||
|
|
0deg,
|
||
|
|
rgba(99, 184, 175, 0.1) 33%,
|
||
|
|
rgba(99, 184, 175, 1) 100%
|
||
|
|
);
|
||
|
|
animation: spin 0.8s linear 0s infinite;
|
||
|
|
|
||
|
|
position: absolute;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-border-stop {
|
||
|
|
padding: 3upx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: rgb(99, 184, 175);
|
||
|
|
position: absolute;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-core {
|
||
|
|
z-index: 1;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
</style>
|