login加载就是在用户打开页面以后,为了告诉用户加载数据,做起来很简单
<template>
<view class="myloading">
<view class="loading-container">
<view class="loading">
<view class="loadpic">
<image src="../static/com/loading.jpg" mode=""></image>
</view>
<view class="circle"></view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.myloading {
position: fixed;
width: 100%;
height: 100%;
background-color: transparent;
top: 0;
left: 0;
z-index: 99999999999;
}
//loading
.loading-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.loading {
width: 100rpx;
height: 100rpx;
position: relative;
}
.loadpic {
position: absolute;
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
overflow: hidden;
border: 8rpx solid transparent;
image {
width: 100%;
height: 100%;
}
}
.circle {
width: 100%;
height: 100%;
border: 8rpx solid #f7bbbb4c;
border-radius: 50%;
border-top-color: #ee528f;
animation: spin 2s linear infinite;
position: absolute;
top: 0;
left: 0;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>