vue之loading组件
转载于:链接: link.
转载于:链接: link.
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/21972582557959a7f0b2a69bced7e803.png#pic_center)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ca1ac8454123ad47d5a7545303cdd64f.png#pic_center)
组件1
<template>
<div class="loadEffect" :style="{marginTop: marginTop? marginTop : '50%'}">
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
<span class="ld-span"></span>
</div>
</template>
<script>
export default {
name: 'Loading',
props: ["marginTop"]
}
</script>
<style scoped>
.loadEffect{
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
position: relative;
top:-50px;
margin-top:50%;
transform: scale(.5)
}
.loadEffect .ld-span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #67e7d5;
position: absolute;
-webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
0%{
-webkit-transform: scale(1.2);
opacity: 1;
}
100%{
-webkit-transform: scale(.3);
opacity: 0.5;
}
}
.loadEffect .ld-span:nth-child(1){
left: 0;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.13s;
}
.loadEffect .ld-span:nth-child(2){
left: 14px;
top: 14px;
-webkit-animation-delay:0.26s;
}
.loadEffect .ld-span:nth-child(3){
left: 50%;
top: 0;
margin-left: -10px;
-webkit-animation-delay:0.39s;
}
.loadEffect .ld-span:nth-child(4){
top: 14px;
right:14px;
-webkit-animation-delay:0.52s;
}
.loadEffect .ld-span:nth-child(5){
right: 0;
top: 50%;
margin-top:-10px;
-webkit-animation-delay:0.65s;
}
.loadEffect .ld-span:nth-child(6){
right: 14px;
bottom:14px;
-webkit-animation-delay:0.78s;
}
.loadEffect .ld-span:nth-child(7){
bottom: 0;
left: 50%;
margin-left: -10px;
-webkit-animation-delay:0.91s;
}
.loadEffect .ld-span:nth-child(8){
bottom: 14px;
left: 14px;
-webkit-animation-delay:1.04s;
}
</style>
组件2
<template>
<div class="loader"></div>
</template>
<script>
export default {
name: 'Loading'
}
</script>
<style lang="scss" scoped>
$colors:
hsla(337, 84, 48, 0.75)
hsla(160, 50, 48, 0.75)
hsla(190, 61, 65, 0.75)
hsla( 41, 82, 52, 0.75);
$size: 2.5em;
$thickness: 0.5em;
$lat: ($size - $thickness) / 2;
$offset: $lat - $thickness;
.loader {
position: relative;
width: $size;
height: $size;
transform: rotate(165deg);
&:before,
&:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: $thickness;
height: $thickness;
border-radius: $thickness / 2;
transform: translate(-50%, -50%);
}
&:before {
animation: before 2s infinite;
}
&:after {
animation: after 2s infinite;
}
}
@keyframes before {
0% {
width: $thickness;
box-shadow:
$lat (-$offset) nth($colors, 1),
(-$lat) $offset nth($colors, 3);
}
35% {
width: $size;
box-shadow:
0 (-$offset) nth($colors, 1),
0 $offset nth($colors, 3);
}
70% {
width: $thickness;
box-shadow:
(-$lat) (-$offset) nth($colors, 1),
$lat $offset nth($colors, 3);
}
100% {
box-shadow:
$lat (-$offset) nth($colors, 1),
(-$lat) $offset nth($colors, 3);
}
}
@keyframes after {
0% {
height: $thickness;
box-shadow:
$offset $lat nth($colors, 2),
(-$offset) (-$lat) nth($colors, 4);
}
35% {
height: $size;
box-shadow:
$offset 0 nth($colors, 2),
(-$offset) 0 nth($colors, 4);
}
70% {
height: $thickness;
box-shadow:
$offset (-$lat) nth($colors, 2),
(-$offset) $lat nth($colors, 4);
}
100% {
box-shadow:
$offset $lat nth($colors, 2),
(-$offset) (-$lat) nth($colors, 4);
}
}
html,
body {
height: 100%;
}
.loader {
position: absolute;
top: calc(50% - #{$size / 2});
left: calc(50% - #{$size / 2});
}
</style>