.loader-overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99999;
    background: rgb(2 80 30 / 0%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
/*

    .loader-overlay .loader {
        position: relative;
        width: 100px;
        height: 100px;
    }

        .loader-overlay .loader .box {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #132d6d;
            transform: rotate(45deg);
            opacity: 0.8;
        }

            .loader-overlay .loader .box .inner {
                width: 100%;
                height: 100%;
                transform: scale(0);
                animation: pop 1.5s ease-in-out infinite;
                background-color: inherit;
            }

            .loader-overlay .loader .box.left {
                top: 0;
                left: 0;
            }

            .loader-overlay .loader .box.right {
                top: 0;
                right: 0;
            }

            .loader-overlay .loader .box.center {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(45deg);
            }

            .loader-overlay .loader .box.left .inner {
                animation-delay: 0s;
            }

            .loader-overlay .loader .box.right .inner {
                animation-delay: 0.3s;
            }

            .loader-overlay .loader .box.center .inner {
                animation-delay: 0.6s;
            }

@keyframes pop {
    0%, 100% {
        transform: scale(0);
        opacity: 0;
    }

    30% {
        transform: scale(1.2);
        opacity: 1;
    }

    60% {
        transform: scale(1);
        opacity: 1;
    }
}
 
*/

.loader {
    width: 60px;
    padding: 6px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ec3c96;
    --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}