Showcase any process, timeline or set of stages with this interactive progress component card. It gives you a clean way to guide visitors through a journey without making the section feel static.
Each step is displayed as a horizontal card with a step/stage number, title, short description and animated vertical progress bar. As the progress moves through each stage, it creates a smooth, structured flow from one card to the next.
Each card includes:
- Step number
- Card title
- Short description text
- Animated vertical progress bar
- Custom background and text styling
Perfect for:
- Process sections
- Project timelines
- Service journeys
- Product stages
- Portfolio case studies
- Onboarding flows
Responsive behaviour:
Choose between desktop and mobile variations to fit your breakpoints.
How to use this component in Framer
- Remix the component using the link below and open it in Framer.
- Copy the component into your own project: Copy the Progress Steps component from the remix file and paste it into the page where you want it to appear.
- Place the component on your page: Add it to the part of your page where you want the progress steps to show. This could be a process section, service journey, timeline or onboarding flow.
- Assign the scroll section: Select the Progress Steps component itself, then use the Scroll Section setting in the right-hand panel to assign the component as the section being tracked. You can name it something simple like section1.
- This tells Framer when the animation should start. The progress bars are designed to animate as the component reaches that part of the screen.
- Check the assigned scroll section: In the component settings, make sure the Scroll Section field is set to the same section name, for example section1.
- Update the content: Change the step numbers, card titles and descriptions to match your own process, timeline or service journey.
- Customise the styling: Adjust the card backgrounds, text colours, fonts and progress bar colours to match your brand or website design.
- Check desktop and mobile variations: Use the included desktop and mobile variants to make sure the layout works across your breakpoints.
- Preview and test: Open Preview mode and scroll down to the component. The progress bars should animate as the component enters the relevant part of the screen.
Troubleshooting
If the animation does not work, check that the scroll section has been assigned to the Progress Steps component itself, not the parent stack, page section or another frame.
Beth
