:root {
--grimlock-loader-size: 50px;
--grimlock-loader-z-index: 9999999;
--grimlock-loader-animation-speed: .3s;
} @keyframes loader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.grimlock-loader-wrapper {
position: fixed;
z-index: var(--grimlock-loader-z-index);
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--grimlock-loader-background-color);
color: var(--grimlock-loader-color);
cursor: wait;
}
.grimlock--loader-hidden .grimlock-loader-wrapper {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all var(--grimlock-loader-animation-speed) 0.8s ease-in-out;
}
.grimlock-loader {
display: block;
position: absolute;
left: 50%;
top: 50%;
z-index: var(--grimlock-loader-z-index)1;
width: var(--grimlock-loader-size);
height: var(--grimlock-loader-size);
margin: calc((var(--grimlock-loader-size) / 2 ) * -1) 0 0 calc((var(--grimlock-loader-size) / 2 ) * -1);
border: 3px solid transparent;
border-top-color: var(--grimlock-loader-color);
border-radius: 50%;
animation: loader-spin .5s ease-in-out infinite;
}
.grimlock--loader-hidden .grimlock-loader {
opacity: 0;
transition: all var(--grimlock-loader-animation-speed) ease-in-out;
}