pkg-components
Version:
49 lines (42 loc) • 740 B
CSS
.wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.dot {
position: relative;
width: 12px;
height: 12px;
border-radius: 9999px;
transition: background-color 0.2s ease;
}
.dotActive {
background-color: #22c55e; /* verde */
}
.dotInactive {
background-color: #ef4444; /* rojo */
}
.ping {
position: absolute;
inset: 0;
border-radius: inherit;
background-color: rgba(34, 197, 94, 0.45);
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
0% {
transform: scale(1);
opacity: 0.7;
}
75% {
transform: scale(2.2);
opacity: 0;
}
100% {
opacity: 0;
}
}
.label {
font-size: 0.85rem;
color: #ddd;
}