一个平平无奇的小功能，塞进component文件夹里就可以引用，可以帮你节省10分钟
呐，看源码：
代码语言：javascript复制<template>
<div class="loading" :class="[date?'':'vanish']">
<div class="loadOne load">
<div class="circle-loader">
<div class="circle-line">
<div class="circle circle-blue"></div>
<div class="circle circle-blue"></div>
<div class="circle circle-blue"></div>
</div>
<div class="circle-line">
<div class="circle circle-yellow"></div>
<div class="circle circle-yellow"></div>
<div class="circle circle-yellow"></div>
</div>
<div class="circle-line">
<div class="circle circle-red"></div>
<div class="circle circle-red"></div>
<div class="circle circle-red"></div>
</div>
<div class="circle-line">
<div class="circle circle-green"></div>
<div class="circle circle-green"></div>
<div class="circle circle-green"></div>
</div>
</div>
</div>
<button class="btn open" @click="enter">进入</button>
</div>
</template>
<script>
export default {
name:"Loading",
data(){
return{
date:true
}
},
methods:{
enter(){
this.date = false
}
}
}
</script>
<style lang="stylus" scoped>
.loading{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:orange;
font-family: 'Roboto', sans-serif;
background-color: #FFD399;
.load{
position:absolute;
top:140px;left:0;right:0;
margin:auto;
}
.loadOne{
left:16px;
@-webkit-keyframes rotate-animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes move-animation {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-64px, 0);
transform: translate(-64px, 0);
}
75% {
-webkit-transform: translate(32px, 0);
transform: translate(32px, 0);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-webkit-keyframes move-animation {
0%{
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
}
@keyframes move-animation {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-64px, 0);
transform: translate(-64px, 0);
}
75% {
-webkit-transform: translate(32px, 0);
transform: translate(32px, 0);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
body {
background-color: #F5F5F5;
}
.circle-loader {
display: block;
width: 64px;
height: 64px;
margin-left: -32px;
margin-top: -32px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform-origin: 16px 16px;
transform-origin: 16px 16px;
-webkit-animation: rotate-animation 5s infinite;
animation: rotate-animation 5s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.circle-loader .circle {
-webkit-animation: move-animation 2.5s infinite;
animation: move-animation 2.5s infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
position: absolute;
left: 50%;
top: 50%;
}
.circle-loader .circle-line {
width: 64px;
height: 24px;
position: absolute;
top: 4px;
left: 0;
-webkit-transform-origin: 4px 4px;
transform-origin: 4px 4px;
}
.circle-loader .circle-line:nth-child(0) {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.circle-loader .circle-line:nth-child(1) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle-loader .circle-line:nth-child(2) {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle-loader .circle-line:nth-child(3) {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.circle-loader .circle-line .circle:nth-child(1) {
width: 8px;
height: 8px;
top: 50%;
left: 50%;
margin-top: -4px;
margin-left: -4px;
border-radius: 4px;
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.circle-loader .circle-line .circle:nth-child(2) {
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;
border-radius: 8px;
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.circle-loader .circle-line .circle:nth-child(3) {
width: 24px;
height: 24px;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
border-radius: 12px;
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.circle-loader .circle-blue {
background-color: #1f4e5a;
}
.circle-loader .circle-red {
background-color: #ff5955;
}
.circle-loader .circle-yellow {
background-color: #ffb265;
}
.circle-loader .circle-green {
background-color: #00a691;
}
}
.btn{
position:absolute;
left:0; right:0;
margin:auto;
width:140px;
height:46px;
}
.open{
bottom:120px;
}
}
@keyframes loadtime{
from{opacity:1}
to{opacity:0}
}
.vanish{
animation:loadtime .7s forwards;
}
</style>因为活动详情没有隐藏原生导航栏，所以加载页不是全屏，原理：将组件透明化
