.preloader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: $white-color;

    .th-btn {
        padding: 15px 20px;
        border-radius: 0;
        font-size: 14px;
    }
}

.preloader-inner {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1;

    img {
        display: block;
        margin: 0 auto 0 auto;
    }
}

.loader {
    width: 100vw;
    height: 100vh;
    background: $smoke-color2;
    --amount: 20;
}

$animationDuration: 2.5s;
$amount: 6;
$particleRadius: 3vmin;
.loader span {
    width: $particleRadius * 2;
    height: $particleRadius * 2;
    border-radius: $particleRadius;
    backface-visibility: hidden;
    position: absolute;
    animation-name: move;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 0.8);
    animation-iteration-count: infinite;
    animation-duration: $animationDuration;
    top: calc(50% - #{$particleRadius});
    left: 50%;
    transform-origin: ($particleRadius * -1) center;

    $colors: ($theme-color, $theme-color2);

    @for $i from 1 through $amount {
        &:nth-child(#{$i}) {
            background: nth($colors, random(length($colors)));
            animation-delay: ($i / $amount) * $animationDuration * -1;
            opacity: 0;
        }
    }
}

@keyframes move {
    0% {
        transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
    }
    30% {
        opacity: 1;
    }
    100% {
        z-index: 10;
        transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
    }
}