Skip to main content

Progress Bar

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


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

Progress bar types


Progress bar demo


  • 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.


Progress bar consideration

Designer assets

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact GEL Community.

Developer API

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