Progress indicator
Live demo
Design
Usage
The progress indicator should only be used when we have steps and we should inform your user on which stage he is now.
Anatomy
Desktop:
The progress indicator should consist of 2 lines and the percent optional. The first line should be 440px width(light colour) and the second one should fill it step by step.
Mobile:
The progress indicator should consist of 2 lines and the percent optional. The first line should be as a maximum width(light colour) but not more then 440px and the second one should fill it step by step. Also, here we have company logo.
Behaviour
Desktop:
The progress indicator should consist of 2 lines and the percent optional. The first line should be 440px width(light colour) and the second one should fill it step by step.
Mobile:
The first line should be as a maximum width(light colour) but not more then 440px and the second one should fill it step by step. Also, the percentages on the top left or right corner should be counted and showed(optional) to the user. Also, for mobile we have a version without a logo and percent (simple version).
Accessibility
For screen readers:
Need to add a percentage indicator lebel to ensure people using these readers can also understand how far along they are in the process.
Code
import { ProgressIndicator } from '@shieldpay/bumblebee/progress-indicator'; <ProgressIndicator value={70} /> <ProgressIndicator max={5} value={3} /> <ProgressIndicator value={10} variant="primary" />