.loader-full {
    background-color: #292929;
    position: fixed;
    top: 0%;
    width: 100%;
    height: 100vh;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-fill-mode: forwards;
    border: 2px solid #222222;
}

.loader-wrapper {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #505050;
    box-shadow: 0px 10px 0px -2px rgba(41, 41, 41, 100),
    0px 10px 0px 0px rgba(34, 34, 34, 100);
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes fadeIn {
    0% {
        visibility: visible;
        top: 0%;
    }

    50% {
        visibility: visible;
        top: 50%;
    }

    100% {
        visibility: visible;
        top: 100%;
    }
  }

  @keyframes fadeOut {
    0% {
        visibility: visible;
        top: 100%;
    }

    50% {
        visibility: visible;
        top: 50%;
    }

    100% {
        visibility: visible;
        top: 0%;
    }
  }

  @keyframes changeColor {
    0% {
        visibility: visible;
        background-color: #88b4af;
    }

    100% {
        visibility: visible;
        background-color: white;
    }
  }
/* HTML: <div class="loader"></div> */
.loader {
    width: 35px;
    height: 80px;
    position: relative;
  }
  .loader:before {
    content: "";
    position: absolute;
    inset: 0 0 20px;
    padding: 1px;
    background:
      conic-gradient(from -90deg at calc(100% - 3px) 3px,#7e3c26 135deg,#341612 0 270deg,#0000 0),
      conic-gradient(from   0deg at 3px calc(100% - 3px),#0000 90deg,#341612 0 225deg,#7e3c26 0),
      #54281f;
    background-size: 17px 17px;
    background-clip: content-box;
    --c:no-repeat linear-gradient(#000 0 0);
    -webkit-mask:
        var(--c) 0    0, 
        var(--c) 17px 0, 
        var(--c) 0    17px, 
        var(--c) 17px 17px, 
        var(--c) 0    34px, 
        var(--c) 17px 34px,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    animation: l6 2s forwards;
  }
  .loader:after {
    content: "";
    position: absolute;
    inset: 60% 0 0;
    background: #242424;
    border-top: 5px solid #c9c7c5; 
  }
  @keyframes l6 {
   0%,14%  {-webkit-mask-size: 0 0,0 0,0 0,0 0,0 0,0 0,auto}
   15%,29% {-webkit-mask-size: 17px 17px,0 0,0 0,0 0,0 0,0 0,auto}
   30%,44% {-webkit-mask-size: 17px 17px,17px 17px,0 0,0 0,0 0,0 0,auto}
   45%,59% {-webkit-mask-size: 17px 17px,17px 17px,17px 17px,0 0,0 0,0 0,auto}
   60%,74% {-webkit-mask-size: 17px 17px,17px 17px,17px 17px,17px 17px,0 0,0 0,auto}
   75%,89% {-webkit-mask-size: 17px 17px,17px 17px,17px 17px,17px 17px,17px 17px,0 0,auto}
   90%,
   100%    {-webkit-mask-size: 17px 17px,17px 17px,17px 17px,17px 17px,17px 17px,17px 17px,auto}
  }

/* HTML: <div class="loader"></div> */
.loader-text {
  font-size: 20px;
  display: inline-grid;
}
.loader-text:before,
.loader-text:after {
  grid-area: 1/1;
  -webkit-mask:linear-gradient(90deg,#000 50%,#0000 0) 0 50%/2ch 100%;
  animation: l11 1s infinite cubic-bezier(0.5,220,0.5,-220);
}
.loader-text:after {
  -webkit-mask-position:1ch 50%;
  --s:-1;
}
@keyframes l11 {100%{transform: translateY(calc(var(--s,1)*0.1%));}}

.loader-img {
  width: 30%;
}