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

Posted by:Hima Vincent

Hima Vincent is the founder & editor in chief of CodeMyUI. She is a writer by day and a reader by night who helps web designers build awesome projects by sharing amazing code snippets for inspiration. Hobbies include designing, card games, photography and exploring the culinary arts.