File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div v-if="isLoading" class="loading-overlay">
<div class="loading-wrap">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<p class="loading-text white">네트워크 환경에따라 대기시간이 길어질 수 있습니다</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {},
watch: {},
computed: {
isLoading() {
return this.$store.state.isLoading;
}
},
mounted() {
},
beforeDestroy() {
},
};
</script>
<style scoped>
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.loading-wrap {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
position: fixed;
}
.loading {
--speed-of-animation: 0.9s;
--gap: 6px;
--first-color: #4c86f9;
--second-color: #49a84c;
--third-color: #f6bb02;
--fourth-color: #f6bb02;
--fifth-color: #2196f3;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
gap: 6px;
height: 100px;
}
.loading span {
width: 4px;
height: 50px;
background: var(--first-color);
animation: scale var(--speed-of-animation) ease-in-out infinite;
}
.loading span:nth-child(2) {
background: var(--second-color);
animation-delay: -0.8s;
}
.loading span:nth-child(3) {
background: var(--third-color);
animation-delay: -0.7s;
}
.loading span:nth-child(4) {
background: var(--fourth-color);
animation-delay: -0.6s;
}
.loading span:nth-child(5) {
background: var(--fifth-color);
animation-delay: -0.5s;
}
.loading-text {
font-size: 1.7rem;
color: white; /* 텍스트 색상 */
text-align: center; /* 중앙 정렬 */
}
@keyframes scale {
0%,
40%,
100% {
transform: scaleY(0.05);
}
20% {
transform: scaleY(1);
}
}
</style>