91 lines
1.4 KiB
Vue
Executable File
91 lines
1.4 KiB
Vue
Executable File
<template>
|
|
<div class="load-container">
|
|
<div class="load-ellipsis">
|
|
<div />
|
|
<div />
|
|
<div />
|
|
<div />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.load-container {
|
|
display: inline-flex;
|
|
position: relative;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.load-ellipsis {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 5rem;
|
|
height: .75rem;
|
|
}
|
|
|
|
.load-ellipsis div {
|
|
position: absolute;
|
|
top: 0;
|
|
width: .75rem;
|
|
height: .75rem;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
}
|
|
|
|
.load-ellipsis div:nth-child(1) {
|
|
left: .5rem;
|
|
animation: load-ellipsis1 0.5s infinite linear;
|
|
}
|
|
|
|
.load-ellipsis div:nth-child(2) {
|
|
left: .5rem;
|
|
animation: load-ellipsis2 0.5s infinite linear;
|
|
}
|
|
|
|
.load-ellipsis div:nth-child(3) {
|
|
left: 2rem;
|
|
animation: load-ellipsis3 0.5s infinite linear;
|
|
}
|
|
|
|
.load-ellipsis div:nth-child(4) {
|
|
left: 3.5rem;
|
|
animation: load-ellipsis4 0.5s infinite linear;
|
|
}
|
|
|
|
@keyframes load-ellipsis1 {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
100% {
|
|
transform: scale(0.5);
|
|
}
|
|
}
|
|
|
|
@keyframes load-ellipsis2 {
|
|
0% {
|
|
transform: translate(0, 0) scale(0.5);
|
|
}
|
|
100% {
|
|
transform: translate(1.5rem, 0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes load-ellipsis3 {
|
|
0% {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
100% {
|
|
transform: translate(1.5rem, 0) scale(0.5);
|
|
}
|
|
}
|
|
|
|
@keyframes load-ellipsis4 {
|
|
0% {
|
|
transform: scale(0.5);
|
|
}
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
</style>
|