63 lines
1.0 KiB
Vue
63 lines
1.0 KiB
Vue
<template>
|
|
<view class="box">
|
|
<view class="loading1"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'loading',
|
|
watch: {
|
|
isShowLoading: {
|
|
handler(val) {
|
|
console.log(val)
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
options: {
|
|
Loading: true
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.log('isShowLoading', this.isShowLoading)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.box {
|
|
position: absolute;
|
|
top: 20%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.loading1 {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 2px solid #fff;
|
|
border-top-color: transparent;
|
|
border-radius: 100%;
|
|
animation: circle1 infinite 0.75s linear;
|
|
}
|
|
|
|
@keyframes circle1 {
|
|
0% {
|
|
transform: rotate(0);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|