Not parsing HTML with jsdom when using http module directly to save memory. Added loading ellipsis to release grid pages.
This commit is contained in:
90
assets/components/loading/ellipsis.vue
Normal file
90
assets/components/loading/ellipsis.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user