99 lines
1.6 KiB
SCSS
99 lines
1.6 KiB
SCSS
.loading-indicator-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
width: 100vw;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
}
|
|
|
|
.loading-indicator {
|
|
overflow: visible;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
font-size: 0.75rem;
|
|
color: rgb(var(--color-gray-50));
|
|
text-transform: uppercase;
|
|
|
|
.dark & {
|
|
color: rgb(var(--color-gray-800));
|
|
}
|
|
}
|
|
|
|
.loading-indicator__container {
|
|
position: relative;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.loading-indicator__figure {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border: 0 solid #e5e7eb;
|
|
border-width: 6px;
|
|
border-radius: 9999px;
|
|
|
|
background-color: transparent;
|
|
|
|
.dark & {
|
|
border-color: rgb(var(--color-gray-800));
|
|
}
|
|
}
|
|
|
|
.no-reduce-motion .loading-indicator__figure {
|
|
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
.loading-indicator-wrapper .loading-indicator {
|
|
align-items: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
&__figure {
|
|
border-color: rgb(var(--color-gray-200));
|
|
|
|
.dark & {
|
|
border-color: rgb(var(--color-gray-800));
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes loader-figure {
|
|
0% {
|
|
width: 0;
|
|
height: 0;
|
|
background: var(--hex-yellow-200);
|
|
}
|
|
|
|
29% {
|
|
background: rgb(var(--color-gray-200));
|
|
}
|
|
|
|
30% {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-width: 6px;
|
|
|
|
opacity: 1;
|
|
background: transparent;
|
|
}
|
|
|
|
100% {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-width: 0;
|
|
|
|
opacity: 0;
|
|
background: transparent;
|
|
}
|
|
}
|