Animate progress bar transitions on application pages

[Copilot]

Summary of the problem

Progress bar jumps instantly when navigating between application pages (Project Info → Personal Info → Review). Creates jarring UX.

Describe your changes

Added CSS transition to progress bar width in app/views/layouts/apply.html.erb:

<div class="bg-primary h-1 transition-[width] duration-500 ease-in-out" style="width: <%= yield(:progress) %>%"></div>

• transition-[width] - Animates width changes
• duration-500 - 500ms duration
• ease-in-out - Smooth easing

Progress bar now smoothly transitions between 25% → 50% → 75% → 100% when clicking Back/Continue buttons.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Application] Make progress bar animated between pages</issue_title>
<issue_description>On the Application pages, when you click Back or Continue, it brings you to the next page, but the progress bar jumps. It would be nice to have it animate/morph to the next progress percentage.

Maybe you can use turbo morph for this or some simple JS.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [Application] Make progress bar animated between pages #12890

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.