Progress Bar
The progress can be determinate or indeterminate. Use Progress Bar to show an ongoing process that takes a noticeable time to finish.
<ProgressBar value={0.5} />
Note
|
Global loading indicator
A global loading indicator shows at the top of the viewport while processing a server request, after a configurable delay.
You don’t need to give an explicit Progress Bar for these situations.
|
Bounds and Initial Value
The progress value defaults to a range from 0 to 1, with an initial value of 0. These can be changed to any numeric values.
Theme Variants
Progress Bar comes with three theme variants: contrast, success, and error.
Variant | Theme name | Usage recommendations |
---|---|---|
Success | success | * When progress is satisfactory and/or nearing completion * Visual preference |
Error | error | * When progress is unsatisfactory * Draw the user’s attention to a stalled or failed process |
Contrast | contrast | * Visual preference |
Best Practices
Offer a Label
Use labels to give context to a Progress Bar. Labels can also show the progress of a determinate progress bar in text in addition to a graphical representation. An example of this is the percentage of completion, or the number of items processed.
State Switching
Switch from indeterminate to determinate if the progress becomes computable, and similarly from determinate to indeterminate if it becomes non-computable.
Estimate Completion Time
Give estimates when possible. If a process takes about 20 minutes, communicate that to the user.
Asynchronous Processes
If the user is waiting for a process to finish, consider using a Notification to tell them upon its completion and/or failure. This is useful if the processing takes place “off-screen” or the user is doing other work while waiting.
Note
|
Avoid blocking processes
Use asynchronous processes whenever possible so as not to block the user from completing other tasks while waiting for the process to finish.
|
When to Use
If a backend process takes longer than 1 second, use a Progress Bar to show the user that something is happening. This is important when it blocks the user’s workflow.
Placement
A Progress Bar’s location in the UI implies its scope and whether the surrounding UI is operable during its progression.
For example, a Vaadin application’s built-in loading indicator is placed at the top of the viewport to show that it affects the entire application. The UI is not operable during pending server requests.
Placing a Progress Bar in a dialog, details panel or an otherwise defined section implies that the process displayed is specific to that section. Depending on the use case, the user may or may not be able to interact with the UI.
Related Components
Component | Usage recommendations |
---|---|
Component for uploading files. |
Important
| You can find more information in the corresponding article on vaadin.com. |