96 lines
1.8 KiB
SCSS
96 lines
1.8 KiB
SCSS
.loading-indicator-wrapper {
|
|
@apply h-screen w-screen flex justify-center items-center;
|
|
}
|
|
|
|
.loading-indicator {
|
|
@apply text-gray-50 text-xs uppercase flex flex-col items-center justify-center overflow-visible;
|
|
}
|
|
|
|
.loading-indicator__container {
|
|
@apply w-10 h-10 relative;
|
|
}
|
|
|
|
.loading-indicator__figure {
|
|
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-transparent;
|
|
border: 0 solid;
|
|
border-width: 6px;
|
|
border-color: #e5e7eb;
|
|
}
|
|
|
|
.no-reduce-motion .loading-indicator span {
|
|
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
|
|
.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 {
|
|
@apply h-screen w-screen items-center;
|
|
|
|
&__figure {
|
|
@apply border-gray-200;
|
|
}
|
|
}
|
|
|
|
@keyframes loader-figure {
|
|
0% {
|
|
@apply bg-gray-200 w-0 h-0;
|
|
}
|
|
|
|
29% {
|
|
@apply bg-gray-200;
|
|
}
|
|
|
|
30% {
|
|
@apply w-12 h-12 bg-transparent opacity-100;
|
|
border-width: 6px;
|
|
}
|
|
|
|
100% {
|
|
@apply w-12 h-12 border-0 opacity-0 bg-transparent;
|
|
}
|
|
}
|
|
|
|
@keyframes loader-label {
|
|
0% { opacity: 0.25; }
|
|
30% { opacity: 1; }
|
|
100% { opacity: 0.25; }
|
|
}
|
|
|
|
@keyframes heartbeat {
|
|
0% {
|
|
transform: scale(1);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
10% {
|
|
transform: scale(0.91);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
17% {
|
|
transform: scale(0.98);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
33% {
|
|
transform: scale(0.87);
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
45% {
|
|
transform: scale(1);
|
|
animation-timing-function: ease-out;
|
|
}
|
|
}
|
|
|
|
.no-reduce-motion .pulse-loading {
|
|
transform-origin: center center;
|
|
animation: heartbeat 1.5s ease-in-out infinite both;
|
|
}
|
|
|
|
.ptr,
|
|
.ptr__children {
|
|
@apply overflow-visible #{!important};
|
|
}
|