.pulse-dot-wrap { display: inline-flex; align-items: center; gap: 10px; } .pulse-dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background-color: #4CAF50; flex-shrink: 0; } .pulse-dot::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #4CAF50; animation: pulse-ring 2s ease-out infinite; } @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.8); opacity: 0; } }