.loader {
    background: var(--bg-color);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0vw;
    left: 0vw;
    display: grid;
    place-items: center;
    z-index: 1000;
}

.initialLoader {
    text-align: center;
    transition: 0.2s;
}

.initialLoader img {
    width: 20vw;
}

.initialLoader .bar {
    width: 50vw;
    height: 2vw;
    overflow: hidden;
    border-radius: 10vw;
    background: var(--bgs-color);
    margin-top: 10vw;
}

.initialLoader .bar hr {
    background: var(--main-color);
    width: 20%;
    border-radius: 10vw;
    height: 100%;
    border: none;
    animation: initialLoad 2s infinite;
}

@keyframes initialLoad {
    0%   {
        width: 20%;
        margin-left: -20%;
    }
    50%  {
        width: 100%;
        margin-left: 0%;
    }
    100% {
        width: 20%;
        margin-left: 100%;
    }
}
.initialLoader.fade {
    opacity: 0;
}
.initialLoader.hide {
    display: none;
}

.pageLoader {
    background: var(--bg-color);
    width: 100%;
    max-width: 100vw;
    height: calc(100vh - 20vw);
    display: grid;
    place-items: center;
}

.pageLoader .spin {
    border: 2vw solid var(--bgs-color);
    border-top: 2vw solid var(--main-color);
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    animation: spin_loader 1s infinite;
}

@keyframes spin_loader {
    0%   {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.processLoader {
    position: fixed;
    top: 0vw;
    left: 0vw;
    opacity: 1;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(var(--blur));
}
.processLoader.active {
    display: inline-grid;
    place-items: center;
}

.processLoader .circle {
    border: 2vw solid var(--bgs-color);
    border-top: 2vw solid var(--main-color);
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    animation: spin_loader 1s infinite;
}