Pelican Design System
Progress Indicator
Progress Indicator
Progress Indicators show users their place in a multi-step process.
On this page:
Best Practices
- Use the Large Progress Indicator when the progress can be easily divided into segments.
- Use it in conjunction with Back and Forward Buttons.
- Put the current step’s info into the
<title>within the<head>. - Use the Small Progress Indicator when the progress is hard to divide into clean segments.
Usage
Large Progress Indicator
See the Pen Popovers by LA Gov Design Team (@lagovdesignteam) on CodePen.
Small Progress Indicator
See the Pen Progress Indicator Large by LA Gov Design Team (@lagovdesignteam) on CodePen.