.loader-overlay{
    position: fixed;
    top: 0;    
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 20%);
    z-index: 99;
}
.loader {
    --loader-height: calc(100px / 7);
    display: flex;
    
    position: absolute;
    left: 50%;
    bottom: -5%;
    transform:translate(-50%,0);

    --loader-height: calc(100px / 7);
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%,-50%);
}
.loader::before {
    content: '';
    position: absolute;
}

.loader::before,
.loader > span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: black;

    animation-name: to-right;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.loader > span:nth-child(even) {
    visibility: hidden;
}

.loader > span:first-child {
    animation-name: scale-up;
}

.loader > span:last-child {
    animation-name: scale-up;
    animation-direction: reverse;
}

.card.first-load{opacity: 0;}
.loader.first-load{opacity: 1;bottom: 50%;}

@keyframes to-right {
    to {
        transform: translateX(200%);
    }
}

@keyframes scale-up {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
}