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.