Cart Progress Base

<div class="ws-cart-progress rounded-xl border border-slate-200 bg-slate-50 p-4" style="--progress-bg: var(--ws-color-surface); --progress-border: var(--ws-color-border);">
  <div class="flex items-center gap-3">
    <svg class="h-5 w-5 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/>
    </svg>
    <p class="text-sm text-slate-600">
      Buy <span class="font-semibold text-slate-900">€25.00</span> more to enjoy <span class="font-semibold text-emerald-600">Free Shipping</span>
    </p>
  </div>
  <div class="relative mt-3 h-2 rounded-full bg-slate-200">
    <div class="h-2 w-[67%] rounded-full bg-emerald-500 transition-all duration-500 ease-out"></div>
    <!-- Truck indicator -->
    <div class="absolute top-1/2 -translate-y-1/2 transition-all duration-500" style="left: 67%">
      <div class="flex h-5 w-5 -translate-x-1/2 items-center justify-center rounded-full bg-emerald-500 text-white shadow">
        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/></svg>
      </div>
    </div>
  </div>
</div>