vue2 IconLoading 加载中组件
IconLoading.vue
<template>
<div class="loading">
<div class="loading-bar" />
<div class="loading-bar" />
<div class="loading-bar" />
<div class="loading-bar" />
<div class="loading-bar" />
</div>
</template>
<script>
export default {
name: 'IconLoading',
components: {},
data() {
return {
};
},
methods: {}
};
</script>
<style lang="scss" scoped>
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.loading-bar {
height: 14px;
width: 4px;
margin: 0 2px;
background-color: #333;
animation: loading 1s ease-in-out infinite;
}
.loading-bar:nth-child(1) {
animation-delay: 0s;
}
.loading-bar:nth-child(2) {
animation-delay: .1s;
}
.loading-bar:nth-child(3) {
animation-delay: .2s;
}
.loading-bar:nth-child(4) {
animation-delay: .3s;
}
.loading-bar:nth-child(5) {
animation-delay: .4s;
}
@keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 1.5);
}
40% {
transform: scale(1);
}
}
</style>
使用
<IconLoading />
效果 上下跳动