Pulse Animated Live Shipment Tracker

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="tracker-card"><div class="tr-top"><div><span class="tr-id">#ORD-88219</span><div class="tr-status">In Transit</div></div><span class="tr-eta">ETA: 2 Hrs</span></div><div class="tr-progress"><div class="tr-line"><div class="tr-fill"></div></div><div class="tr-steps"><div class="step done">✓</div><div class="step active"><span class="p-ring"></span></div><div class="step"></div></div></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.tracker-card { width: 220px; background: #0f172a; border: 1px solid #1e293b; border-radius: 16px; padding: 16px; font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.tr-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.tr-id { font-size: 7px; font-weight: 800; color: #64748b; display: block; }
.tr-status { font-size: 10px; font-weight: 900; color: #38bdf8; margin-top: 1px; }
.tr-eta { background: rgba(56, 189, 248, 0.1); color: #38bdf8; font-size: 7px; font-weight: 800; padding: 3px 6px; border-radius: 6px; }
.tr-progress { position: relative; margin-top: 10px; }
.tr-line { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #1e293b; transform: translateY(-50%); z-index: 0; }
.tr-fill { width: 60%; height: 100%; background: #38bdf8; box-shadow: 0 0 8px #38bdf8; }
.tr-steps { display: flex; justify-content: space-between; position: relative; z-index: 1; }
.step { width: 16px; height: 16px; border-radius: 50%; background: #1e293b; border: 2px solid #0f172a; color: #fff; font-size: 7px; display: flex; align-items: center; justify-content: center; font-weight: 900; }
.step.done { background: #38bdf8; color: #0f172a; }
.step.active { background: #38bdf8; position: relative; }
.p-ring { position: absolute; top: -3px; left: -3px; width: 18px; height: 18px; border: 2px solid #38bdf8; border-radius: 50%; animation: ringPulse 1.5s infinite; }
@keyframes ringPulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }