Add loading indicator

This commit is contained in:
2024-11-04 15:13:07 -05:00
parent 414489d1be
commit ddcb4a5be7
4 changed files with 80 additions and 0 deletions

59
style/loading.scss Normal file
View File

@ -0,0 +1,59 @@
@import "theme.scss";
.loading-page {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.loading {
position: relative;
width: 10px;
height: 10px;
border-radius: 5px;
margin: 10px;
background-color: $accent-color;
color: $accent-color;
animation: dot-flashing 1s infinite linear alternate;
animation-delay: 0.5s;
}
.loading::before, .loading::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
}
.loading::before {
left: -15px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: $accent-color;
color: $accent-color;
animation: dot-flashing 1s infinite alternate;
animation-delay: 0s;
}
.loading::after {
left: 15px;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: $accent-color;
color: $accent-color;
animation: dot-flashing 1s infinite alternate;
animation-delay: 1s;
}
@keyframes dot-flashing {
0% {
background-color: $accent-color;
}
50%, 100% {
background-color: $controls-hover-color;
}
}