/* HTML: <div class="loader"></div> */
.wrapper{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100svh;
    /* background-color: #F1F5F0; */
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  height: 16px;
  display: flex;
  justify-content: space-between;
  animation: l3-0 2s infinite alternate;
}
.loader:before,
.loader:after {
  content: "";
  width: 16px;
  background: #282f6e;
  animation: l3-1 1s infinite alternate;
}
.loader:after {
  background: #b5484a;
  --s:-1;
}
@keyframes l3-0 {
   0%,40%   {transform: rotate(0)}
   80%,100% {transform: rotate(.5turn)}
}
@keyframes l3-1 {
   80%,100% {transform: translate(calc(var(--s,1)*14px))}
}