.loader-container{
    position: fixed;
    /* display: none; */
    inset: 0;
    
    background-color: #0000008c;
    z-index: 9999;

    display: none;
    
}

.loader-container.show{
    display: block;
}


.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    z-index: 1000;
    background-color: #000000b9;

    border-radius: 50%;
  --color-1: #fff;
  --color-2: #ff3d00;
  --size: 1px;

  animation: rotate 1s infinite;
  height: calc(50 * var(--size));
  width: calc(50 * var(--size));
}

.loader:before,
.loader:after {
  border-radius: 50%;
  content: '';
  display: block;
  height: calc(20 * var(--size));
  width: calc(20 * var(--size));
}
.loader:before {
  animation: ball1 1s infinite;
  background-color: var(--color-1);
  box-shadow: calc(30 * var(--size)) 0 0 var(--color-2);
  margin-bottom: calc(10 * var(--size));
}
.loader:after {
  animation: ball2 1s infinite;
  background-color: var(--color-2);
  box-shadow: calc(30 * var(--size)) 0 0 var(--color-1);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(0.8);
  }
  50% {
    transform: rotate(360deg) scale(1.2);
  }
  100% {
    transform: rotate(720deg) scale(0.8);
  }
}

@keyframes ball1 {
  0% {
    box-shadow: calc(30 * var(--size)) 0 0 var(--color-2);
  }
  50% {
    box-shadow: 0 0 0 var(--color-2);
    margin-bottom: 0;
    transform: translate(calc(15 * var(--size)), calc(15 * var(--size)));
  }
  100% {
    box-shadow: calc(30 * var(--size)) 0 0 var(--color-2);
    margin-bottom: calc(10 * var(--size));
  }
}

@keyframes ball2 {
  0% {
    box-shadow: calc(30 * var(--size)) 0 0 var(--color-1);
  }
  50% {
    box-shadow: 0 0 0 var(--color-1);
    margin-top: calc(-20 * var(--size));
    transform: translate(calc(15 * var(--size)), calc(15 * var(--size)));
  }
  100% {
    box-shadow: calc(30 * var(--size)) 0 0 var(--color-1);
    margin-top: 0;
  }
}