Place an Order Progress Bar with Animation Steps

Image: Place an Order Progress Bar with Animation Steps GIF

This is a cool snippet that can work well on e-commerce sites, it was designed by Jamie Coulter. It shows you an animated progress bar that goes through the five steps of sending a gift

  1. Start order
  2. Prepare gift
  3. Pack gift
  4. Decorate box
  5. Send gift

If you are having trouble with the pen, try the archived copy on GitHub

Order Progress Bar Snippet

See the Pen CSS only order process steps by Jamie Coulter (@jcoulterdesign) on CodePen.0

scroll to top