Animated Badge

Notification badge with pulsing ring animation and status indicator.

badgeanimationpulse

Live Preview

Auto-refreshes as you edit

style.cssEditable

.badge-group {
  display: flex;
  gap: 24px;
  align-items: center;
  font-family: 'Segoe UI', sans-serif;
}
.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}
.badge-success {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.3);
}
.badge-warning {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 0.3);
}
.badge-danger {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.3);
}
.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}
.badge-success .badge-dot { background: #3fb950; }
.badge-warning .badge-dot { background: #d29922; }
.badge-danger .badge-dot { background: #f85149; }
.badge-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  animation: pulse-ring 1.5s ease-out infinite;
}
.badge-success .badge-dot::before { border: 2px solid #3fb950; }
.badge-warning .badge-dot::before { border: 2px solid #d29922; }
.badge-danger .badge-dot::before { border: 2px solid #f85149; }
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

index.htmlEditable