:root {
--spinner-color-dark: var(--col-loading);
--spinner-color-light: var(--col-loading);
}
.LoadingSpinner {
position: absolute;
flex: 1;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
.spinner_item {
content: "";
font-size: 10px;
width: 2em;
height: 2em;
animation: spinner 2200ms infinite linear;
border-radius: 1em;
box-shadow: var(--spinner-color-light) 3em 0 0 0,
var(--spinner-color-light) 2.2em 2.2em 0 0,
var(--spinner-color-light) 0 3em 0 0,
var(--spinner-color-light) -2.2em 2.2em 0 0,
var(--spinner-color-light) -3em 0 0 0,
var(--spinner-color-light) -2.2em -2.2em 0 0,
var(--spinner-color-light) 0 -3em 0 0,
var(--spinner-color-light) 2.2em -2.2em 0 0;
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}