- Taxonomic name: A-PROGRESS-BAR
- Added on: v3.0.0 (15/09/17)
- Updated on: v4.8.0 (29/03/19)
Progress bar
The progress bar component is used to display progress through a sequence of steps, and allow users to navigate directly back to a particular step.
Design and usage
- Only use for a minimum of two and a maximum of ten stages.
- The title should include a description of the current stage, eg. 'Step 1 of 3'.
- Steps should link directly back to that stage in the process where appropriate.
- Ensure that the names for each stage are kept concise; the copy will wrap onto multiple lines if required but there is still limited space on small screens when combined with the numbers for other stages.
- Progress bars aren't always necessary or useful in a stepped process - consider whether they are adding any value to the experience and if necessary validate this with user research before implementing.
- Ensure the number of steps involved in a process is clearly represented.
- The progress bar must not be used on dark accent colours.
Examples
Interactive examples
Code example
<div class="a-progress-bar a-progress-bar--[ Modifier ]-steps a-progress-bar--[ Modifier ]">
<p class="a-progress-bar__step">[ Application name ] <strong>Step ... of ...</strong></p>
<div class="a-progress-bar__ui"><div></div></div>
<div class="a-progress-bar__line"><div></div></div>
</div>Development and test
Notes for developers
Ensure that this is only used for a minimum of two and a maximum of ten stages.
Ensure that the names for each stage are kept concise. The copy will wrap onto multiple lines if required but there is still limited space on small screens when combined with the numbers for the other stages.
For the current step the modifier should match the step and the total number of steps required, eg .a-progress-bar--2-3 for step 2 of 3; this should match the copy above the bar.
Notes for testers
- Ensure that copy matches the class modifier, eg.
.a-progress-bar--2-3for step 2 of 3.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.a-progress-bar |
Base style for a progress bar | Yes | div |
|
.a-progress-bar--x-steps |
Style to control the progress bar dividing markers | Yes | .a-progress-bar |
Takes number of steps, eg .a-progress-bar--3-steps, with a minimum of 2 steps and a maximum of 10 steps |
.a-progress-bar--x-y |
Style to control the progress bar line length | Yes | .a-progress-bar |
Takes the format step x of y, eg .a-progress-bar--2-3 for step 2 of 3, with a minimum of 2 steps and a maximum of 10 steps |
.a-progress-bar__step |
Base style for the progress bar copy | Yes | .a-progress-bar > p |
|
.a-progress-bar__line |
Base style for the progress bar line | Yes | .a-progress-bar > div |
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v4.8.0 (29/03/19)
Latest update:
- updated: Styling adjusted so that if being used within a single page application, when the step is updated, the bar will transition nicely to the next step.