Added
by Beth Halligan in ‘Make and register an LPA’
in September 2025.
How to use ‘experimental’ components
Anyone can add an ‘experimental’ status component to the MoJ Design System. They’re early in development and can be used as a starting point.
Read about all the Design System statuses.
The progress tracker component shows the status of a multi-step process.
A visual representation of steps in a process that have and/or must be completed to achieve an outcome.
How the component is currently used
When a user is subject to steps in a process outside of their responsibility or control, a progress tracker supports or replaces a task list by giving a different overview on progress and outcomes.
This differs from a timeline in that it does not log events and grow. It is a pre-fixed set of finite steps. Steps may/may not be completed in any order depending on the process, but the order of the tracker stays fixed.
On the Make and register LPA product we support the tracker with banners above detailing connected events and directions to dated comms from Notify.
Contribute to this component
You can help develop this component by adding information to the ‘progress tracker’ Github discussion. This helps other people to use it in their service.
If you have design files that are relevant to this component you can add them to the Github discussion. This helps other people to use it in their service.
If you have accessibility findings that are relevant to this component you can add them to the Github discussion. This helps other people to use it in their service.
<divid="progress"class="app-progress-bar"><olclass="app-progress-bar__list"><liclass="app-progress-bar__item"><spanclass="app-progress-bar__icon app-progress-bar__icon--complete"></span><spanclass="app-progress-bar__label">
First step<spanclass="govuk-visually-hidden"> completed</span></span></li><liclass="app-progress-bar__item"><spanclass="app-progress-bar__icon app-progress-bar__icon--complete"></span><spanclass="app-progress-bar__label">
Second step<spanclass="govuk-visually-hidden"> completed</span></span></li><liclass="app-progress-bar__item"><spanclass="app-progress-bar__icon"></span><spanclass="app-progress-bar__label">
Third step<spanclass="govuk-visually-hidden"> not completed</span></span></li></ol></div>
Save the SVG to static/assets/images/icon-progress-tick.svg before using it in your project. If it’s saved somewhere else you’ll need to modify the path in the CSS code.
Contribute code for this component
If you have code that is relevant to this component you can add it to the Github discussion. This helps other people to use it in their service.