效果展示
![请添加图片描述](https://img-blog.csdnimg.cn/b307087a52f1453f8e13753c4fab241a.gif)
组件代码
<template>
<div class="spinner">
<div
v-for="item in 5"
:key="item"
:class="rectName + ' rect rect' + item"
></div>
</div>
</template>
<script>
export default {
name: 'LoadingAnimation',
props: {
rectColor: {
type: String,
default: '#3cfff8'
},
rectName: {
type: String,
default: ''
},
},
mounted() {
this.$nextTick(() => {
const rectList = document.getElementsByClassName(this.rectName || 'rect');
rectList.forEach(ele => {
ele.style.backgroundColor = this.rectColor;
ele.style.width = this.rectSize;
ele.style.marginRight = this.rectSize;
});
});
},
};
</script>
<style lang="less" scoped>
.spinner {
text-align: center;
width: 3rem;
height: 3rem;
.rect {
height: 100%;
width: 0.2rem;
margin-right: 0.2rem;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
}
@-webkit-keyframes stretchdelay {
0%,
40%,
100% {
-webkit-transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
}
}
@keyframes stretchdelay {
0%,
40%,
100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
}
</style>
使用方式
<template>
<div style="background:#03131a;height:200px;paddingLeft:20px">
<div style="height:20px"/>
<loading-animation :rectName="'loading1'" :rectColor="'#3cfff8'"/>
<div style="height:20px"/>
<loading-animation :rectName="'loading2'" :rectColor="'#bbe5b7'"/>
</div>
</template>
属性说明
![在这里插入图片描述](https://img-blog.csdnimg.cn/f394f6bb6ff14dd0acd4c49781e00c7c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5LiN6K-05Yir55qE5bCx5piv5b6I6I-c,size_14,color_FFFFFF,t_70,g_se,x_16)