David Hansen

Segmented Progress Bar

  • Save
Segmented Progress Bar ui web progress bar

Our application process is fairly long, so we've divided it up across 6 pages. Users are not required to complete the different sections in order, so we've made an indicator that tracks your progress in each section independently. The check icon indicates a completed section, and the X icon notifies you of validation errors on that page.

If you go in order, you'll get a more traditional looking progress bar like the top example, but if you decide to skip some fields and come back to them later, you might see something like the bottom example.

keyboard shortcuts: L or F like