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.