Progress Bar

A progress bar is a status indicator indicating the percentage of completion of a process.

Variants

There are 3 different types of progress bars available to choose from in GEL.

Demo

Guidance

• User progress bar to indicate the percentage of completion of a process.
• Similar to spinner, in ideal scenario, there would be only one Progress bar at a time in a frame/screen.
• The progress bar component should be supported by visible text indicating what the bar is for, and the units of progress represented.

When to use

• Scenarios to let user inform percentage of completion of a process.

When not to use

• If the amount of time or progress state cannot be calculate, consider using a progress spinner instead.
• If you are loading a content after action has been completed and waiting to get the data, consider using a skeleton instead.
• If running a wizard with discrete steps, consider using a step instead.

Consideration

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP