Skip to content
  • There are no suggestions because the search field is empty.

Progress bar component

Learn about the Progress bar component: characteristics, options, and common use.

After reading this article, you’ll know:

  • What the Progress bar component is and its major options

  • How to use the Progress bar component in your application

What is the Progress bar component?

Progress bar is a content page component used to visually represent the progress of a task or process to users. It indicates how far along a task has progressed or how much of a process has been completed.

Options

Primary, styling, alignment, and spacing options are available within the Progress bar component.

  • Toggle visibility: enable or disable component visibility on and off in the builder mode

  • Type is used to change the view of your progress bar: the default linear type, and circular one

  • Variant allows to select the kind of progress bar depending on the kind of task on load:

    • Buffer indicates some activity or loading from the server

    • Determinate is used for operations where the percentage of the operation complete is known

    • Indeterminate: a user is asked to wait while something finishes and it’s not necessary to indicate how long it will take

    • Query is used to indicate pre-loading before the actual loading starts

  • Height defines how high you want your progress bar to be within a parent component

  • Maximum and minimum values represent the start and endpoint for the Progress bar. This option usually stays from 0 to 100 unless you want to use a dynamic value (+).

  • Value indicates the current level of progress within the defined min-max range

  • Value buffer is an additional attribute used to indicate an intermediate state of completion or loading

Other options include basic styling: selecting the color for your bar, and spacing which enables setting the outer space: from None to XL.

Using the Progress bar

Let's have a look at a simple use case. You have a project management application and you want to track the progress of a user's daily tasks. The Progress bar component will visually represent the number of tasks completed out of the total tasks for the day.

  • Prepare the space for the Progress bar to be placed. In this case, it's a Card with a Box component added to it, where we'll drop our Progress bar.

  • After adding more height to the bar, let's set our values. For this, we created a few input variables that will indicate a number of total and completed tasks.

    • Press + within the Max value field and select total_tasks variable

    • Repeat the same for the Value field and choose completed_tasks variable

Now each time a user sets their task to the status 'Done', the Progress bar will display an updated value.