Morfikus gyűrű

.we-loading-morph {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.we-loading-morph-ring {
    position: absolute;
    width: 76px;
    height: 76px;
    border: 2px solid #5fbd7d;
    border-radius: 50%;
    transform: rotate(0deg);
    animation: weMorphRing 2.6s cubic-bezier(.65, 0, .35, 1) infinite;
}

.we-loading-morph-ring span {
    position: absolute;
    width: 9px;
    height: 9px;
    top: -5px;
    left: 50%;
    margin-left: -4.5px;
    border-radius: 50%;
    background: #f4f1e9;
    box-shadow:
        0 0 16px rgba(122, 201, 142, .7);
}

.we-loading-morph-core {
    width: 18px;
    height: 18px;
    background: #7ac98e;
    transform: rotate(45deg);
    box-shadow:
        0 0 26px rgba(122, 201, 142, .45);
    animation: weMorphCore 2.6s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes weMorphRing {

    0% {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        transform: rotate(0deg) scale(1);
    }

    25% {
        width: 96px;
        height: 48px;
        border-radius: 50%;
        transform: rotate(90deg) scale(1.05);
    }

    50% {
        width: 54px;
        height: 92px;
        border-radius: 45%;
        transform: rotate(180deg) scale(.92);
    }

    75% {
        width: 96px;
        height: 48px;
        border-radius: 12px;
        transform: rotate(270deg) scale(1.05);
    }

    100% {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        transform: rotate(360deg) scale(1);
    }
}

@keyframes weMorphCore {

    0%,
    100% {
        transform: rotate(45deg) scale(.75);
        border-radius: 0;
        opacity: .55;
    }

    25% {
        transform: rotate(135deg) scale(1.2);
        border-radius: 50%;
        opacity: 1;
    }

    50% {
        transform: rotate(225deg) scale(.65);
        border-radius: 4px;
        opacity: .7;
    }

    75% {
        transform: rotate(315deg) scale(1.15);
        border-radius: 50%;
        opacity: 1;
    }
}

document.querySelectorAll(".we-loading-morph").forEach(loader => {
    loader.setAttribute("aria-label", "Betöltés");
});