Vissza az animációkhoz
Loading animációk

Szekvenciális pontok

Élő előnézet – az animáció teljes méretben.

Élő előnézet
HTML · CSS · JS
HTML
<div class="we-loading-dots">
    <span></span>
    <span></span>
    <span></span>
</div>
CSS
.we-loading-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    height: 60px;
}

.we-loading-dots span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #7ac98e;
    box-shadow:
        0 0 14px rgba(122, 201, 142, .28);
    animation: weLoadingDotWave 1.05s ease-in-out infinite;
}

.we-loading-dots span:nth-child(2) {
    animation-delay: .14s;
}

.we-loading-dots span:nth-child(3) {
    animation-delay: .28s;
}

@keyframes weLoadingDotWave {

    0%,
    60%,
    100% {
        transform: translateY(0) scale(1);
        opacity: .45;
    }

    30% {
        transform: translateY(-17px) scale(1.18);
        opacity: 1;
    }
}
JavaScript
document.querySelectorAll(".we-loading-dots").forEach(loader => {
    loader.setAttribute("aria-label", "Betöltés");
});