动画一
<template>
<div class="loading-next">
<div class="loading-next-box">
<div class="loading-next-box-warp">
<div
class="loading-next-box-item"
v-for="item in LoadingDate"
:key="item"
></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'wqWWQ',
data () {
return {
LoadingDate: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
},
methods: {}
}
</script>
<style lang="scss" scoped>
.loading-next {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #f8f8f8;
.loading-next-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loading-next-box-warp {
width: 80px;
height: 80px;
.loading-next-box-item {
width: 33.333333%;
height: 33.333333%;
background: #5fb878;
float: left;
animation: loading-next-animation 1.2s infinite ease;
border-radius: 1px;
}
@keyframes loading-next-animation {
0%,
70%,
to {
transform: scaleZ(1);
}
35% {
transform: scale3D(0, 0, 1);
}
}
.loading-next-box-item:nth-child(7) {
animation-delay: 0s;
}
.loading-next-box-item:nth-child(4),
.loading-next-box-item:nth-child(8) {
animation-delay: 0.1s;
}
.loading-next-box-item:nth-child(1),
.loading-next-box-item:nth-child(5),
.loading-next-box-item:nth-child(9) {
animation-delay: 0.2s;
}
.loading-next-box-item:nth-child(2),
.loading-next-box-item:nth-child(6) {
animation-delay: 0.3s;
}
.loading-next-box-item:nth-child(3) {
animation-delay: 0.4s;
}
}
}
</style>
动画二
<template>
<div class="load-animation">
<div class="animation"></div>
</div>
</template>
<script>
export default {
name: 'ShiftProjectProject',
data () {
return {}
},
mounted () {},
methods: {}
}
</script>
<style lang="scss" scoped>
.load-animation {
position: fixed;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: #f5f5f5;
z-index: 9999999;
display: block;
float: left;
.animation {
width: 50px;
height: 50px;
margin: 30px auto 40px;
margin-top: 20%;
position: relative;
z-index: 999999;
background-color: whitesmoke;
&::before {
content: '';
width: 50px;
height: 7px;
border-radius: 50%;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
animation: shadow 0.5s linear infinite;
}
&::after {
content: '';
width: 50px;
height: 50px;
border-radius: 3px;
background-color: #5fb878;
position: absolute;
top: 0;
left: 0;
animation: loading 0.5s linear infinite;
}
@-webkit-keyframes loading {
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 loading {
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);
}
}
@-webkit-keyframes shadow {
0%,
100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}
@keyframes shadow {
0%,
100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}
}
}
</style>