Progress Steps Indicator

A multi-step progress indicator for order tracking or process flows, with animated state transitions.

Notifications notifications progress animated multi-step intermediate

Prompt

Create a progress steps indicator with:
- Horizontal step tracker with 5 steps: Order Placed, Processing, Shipped, Out for Delivery, Delivered
- Completed steps: filled circle with checkmark, solid connecting line
- Current step: pulsing ring animation, highlighted label
- Future steps: empty circle, dashed connecting line
- Below each step: label and optional sub-label (date/time for completed)
- Vertical variant for mobile
- Animate transitions when step completes
- Demo controls to advance/go back steps
- Use Tailwind CSS, framer-motion

Share:Share on X