CSS
.dna {
display: flex;
gap: 6px;
align-items: center;
}
.dna-dot {
width: 12px;
height: 12px;
border-radius: 50%;
animation: dna 1.2s ease-in-out infinite;
}
.dna-dot:nth-child(odd) {
background: #7c6cff;
}
.dna-dot:nth-child(even) {
background: #ff6c8a;
}
.dna-dot:nth-child(1) {
animation-delay: 0s;
}
.dna-dot:nth-child(2) {
animation-delay: 0.1s;
}
.dna-dot:nth-child(3) {
animation-delay: 0.2s;
}
.dna-dot:nth-child(4) {
animation-delay: 0.3s;
}
.dna-dot:nth-child(5) {
animation-delay: 0.4s;
}
.dna-dot:nth-child(6) {
animation-delay: 0.5s;
}
@keyframes dna {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-18px) scale(0.7);
}
}
@media (prefers-reduced-motion: reduce) {
.dna,
.dna * {
animation: none !important;
}
}