The Progress Bar component visualizes the progress made towards completing a task or achieving a goal. It is helpful in various contexts, such as showing the progress of a file upload, a survey completion, or a fundraising campaign. It is a simple and effective way to communicate progress to users and keep them engaged with a task or goal.


Add a title or label to the component, providing additional context or description to your users on whose progress the bar represents.


Choose an icon from our collection that can visually represent the type of information shown on the progress bar by your preference.


Provide the minimum and maximum values.

These values will be converted to a percentage format, where the minimum value represents 0% and the maximum value represents 100%. The progress on the bar will be displayed based on the represented value, which will be calculated as a percentage between min and max values.


Choose the appearance of the progress bar component:

  • Bar style displays the progress as a horizontal bar that fills up as the progress increases.

  • Ring style shows the progress as a circle that fills up in a clockwise direction.

  • Rating style displays the progress as a series of stars or other icons, with each icon representing 20 percent of progress completion.


Choose whether to hide the component from the view of the app users. This can be useful when the progress bar is irrelevant in some exceptional cases or events or must be hidden for security reasons.


Name the component for use with the Typescript.


Last updated