.loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-100);
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.loading-page.hidden {
    opacity: 0;
}

.loading-page.hidden.ended {
    display: none;
}

.loader {
    width: 125px;
    aspect-ratio: 1;
    display: grid;
    color: var(--text-900);
    background:
      linear-gradient(90deg,currentColor 2px,#0000 0 calc(100% - 2px),currentColor 0) center/100% 14px,
      linear-gradient(0deg, currentColor 2px,#0000 0 calc(100% - 2px),currentColor 0) center/14px 100%,
      linear-gradient(currentColor 0 0) center/100% 2px,
      linear-gradient(currentColor 0 0) center/2px 100%;
    background-repeat: no-repeat;
    animation: l6 4s infinite linear;
  }
  .loader::before,
  .loader::after {
    content: "";
    grid-area: 1/1;
    background: inherit;
    transform-origin: inherit;
    animation: inherit;
  }
  .loader::after {
    animation-duration: 2s;
  }
  @keyframes l6{
    100% {transform:rotate(1turn)}
  }