Loading animációk
Szekvenciális pontok
Élő előnézet – az animáció teljes méretben.
Élő előnézet
HTML · CSS · JS
<div class="we-loading-dots">
<span></span>
<span></span>
<span></span>
</div>
.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;
}
}
document.querySelectorAll(".we-loading-dots").forEach(loader => {
loader.setAttribute("aria-label", "Betöltés");
});