.loader {
width           : 50px;
height          : 50px;
aspect-ratio    : 1;
--loader-color  : #A29490;
--c             : no-repeat linear-gradient(var(--loader-color) 0 0);
background      : var(--c) 0% 50%,
var(--c) 25% 50%,
var(--c) 50% 50%,
var(--c) 75% 50%,
var(--c) 100% 50%;
background-size : 1px 100%;
animation       : l1 1s infinite linear;
}@keyframes l1 {
0% {
background-size : 1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%
}
16% {
background-size : 1px 10%, 1px 100%, 1px 100%, 1px 100%, 1px 100%
}
32% {
background-size : 1px 100%, 1px 10%, 1px 100%, 1px 100%, 1px 100%
}
48% {
background-size : 1px 100%, 1px 100%, 1px 10%, 1px 100%, 1px 100%
}
64% {
background-size : 1px 100%, 1px 100%, 1px 100%, 1px 10%, 1px 100%
}
80% {
background-size : 1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 10%
}
100% {
background-size : 1px 100%, 1px 100%, 1px 100%, 1px 100%, 1px 100%
}
}#preloader {
background      : var(--preloader-bg);
width           : 100%;
height          : 100vh;
overflow        : hidden;
position        : fixed;
top             : 0;
left            : 0;
z-index         : 200;
display         : flex;
justify-content : center;
align-items     : center;
will-change     : opacity;
}#preloader.fade-out {
opacity    : 0;
transition : opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
}#preloader.fade-out.invisible {
visibility : hidden;
}