.loader {
    --path: #fff;
    --dot: var( --color-2);
    --duration: 3s;
    width: 44px;
    height: 44px;
    position: relative;
}

    .loader:before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        position: absolute;
        display: block;
        background: var(--dot);
        top: 37px;
        left: 19px;
        transform: translate(-18px, -18px);
        animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    .loader svg {
        display: block;
        width: 100%;
        height: 100%;
    }

        .loader svg rect, .loader svg polygon, .loader svg circle {
            fill: none;
            stroke: var(--path);
            stroke-width: 10px;
            stroke-linejoin: round;
            stroke-linecap: round;
        }

        .loader svg polygon {
            stroke-dasharray: 145 76 145 76;
            stroke-dashoffset: 0;
            animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
        }

        .loader svg rect {
            stroke-dasharray: 192 64 192 64;
            stroke-dashoffset: 0;
            animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
        }

        .loader svg circle {
            stroke-dasharray: 150 50 150 50;
            stroke-dashoffset: 75;
            animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
        }

    .loader.triangle {
        width: 48px;
    }


.loader.triangle:before {
    left: 21px;
    transform: translate(-10px, -18px);
    animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

@keyframes pathTriangle {
    33% {
        stroke-dashoffset: 74;
    }

    66% {
        stroke-dashoffset: 147;
    }

    100% {
        stroke-dashoffset: 221;
    }
}

@keyframes dotTriangle {
    33% {
        transform: translate(0, 0);
    }

    66% {
        transform: translate(10px, -18px);
    }

    100% {
        transform: translate(-10px, -18px);
    }
}

@keyframes pathRect {
    25% {
        stroke-dashoffset: 64;
    }

    50% {
        stroke-dashoffset: 128;
    }

    75% {
        stroke-dashoffset: 192;
    }

    100% {
        stroke-dashoffset: 256;
    }
}

@keyframes dotRect {
    25% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(18px, -18px);
    }

    75% {
        transform: translate(0, -36px);
    }

    100% {
        transform: translate(-18px, -18px);
    }
}

@keyframes pathCircle {
    25% {
        stroke-dashoffset: 125;
    }

    50% {
        stroke-dashoffset: 175;
    }

    75% {
        stroke-dashoffset: 225;
    }

    100% {
        stroke-dashoffset: 275;
    }
}

.loader {
    display: inline-block;
    margin: 0 16px;
    overflow: hidden;
}

.my-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-1);
}

.loader-container {
    overflow: hidden;
}

.my-loader.fade-out .loader {
    opacity: 0;
    transform: translateY(80px) scale(.7);
    transition: 1.4s cubic-bezier(.3,2.2,.3,1);
}

    .my-loader.fade-out .loader:nth-child(1) {
        transition-delay: .2s;
    }

    .my-loader.fade-out .loader:nth-child(2) {
        transition-delay: .3s;
    }

    .my-loader.fade-out .loader:nth-child(3) {
        transition-delay: .4s;
    }
.my-loader.fade-out {
    top: -100%;
    transition: .6s cubic-bezier(0.785, 0.135, 0.12, 0.86);
    transition-delay: .6s;
}


    .my-loader.no-animation .loader {
        animation: unset;
    }

        .my-loader.no-animation .loader svg polygon,
        .my-loader.no-animation .loader svg rect,
        .my-loader.no-animation .loader svg circle {
            animation: unset;
        }