74 lines
1.1 KiB
Vue
74 lines
1.1 KiB
Vue
<template>
|
|
<div style="position: relative;">
|
|
<div class="dots">
|
|
<div />
|
|
<div />
|
|
<div />
|
|
<div />
|
|
<div />
|
|
<div />
|
|
<div />
|
|
<div />
|
|
<div />
|
|
</div>
|
|
<p class="text">
|
|
AI等待指令中
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.text{
|
|
display: block;
|
|
width: 100%;
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -2em;
|
|
}
|
|
.dots {
|
|
width: 20em;
|
|
height: 20em;
|
|
display: grid;
|
|
grid-template-rows: repeat(3, 1fr);
|
|
grid-template-columns: repeat(3, 1fr);
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.dots > div {
|
|
width: 4em;
|
|
height: 4em;
|
|
background-color: #7fe7c4;
|
|
border-radius: 50%;
|
|
animation: fade 1.5s alternate ease-in-out infinite;
|
|
}
|
|
|
|
.dots > div:nth-of-type(2),
|
|
.dots > div:nth-of-type(4) {
|
|
animation-delay: 0.25s;
|
|
}
|
|
|
|
.dots > div:nth-of-type(3),
|
|
.dots > div:nth-of-type(5),
|
|
.dots > div:nth-of-type(7) {
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.dots > div:nth-of-type(6),
|
|
.dots > div:nth-of-type(8) {
|
|
animation-delay: 0.75s;
|
|
}
|
|
|
|
.dots > div:nth-of-type(9) {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
@keyframes fade {
|
|
to {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
</style>
|