ProgressBar
ProgressBar is component that visually displays the progress of some task. As the task progresses towards completion, the progress bar displays the task's percentage of completion. This percentage is represented visually by a rectangle which starts out empty and gradually becomes filled in as the task progresses. In addition, the progress bar can display a textual representation of this percentage.
Show Code
- Java
Usages
The ProgressBar
component is useful for visualizing the completion status of tasks. It supports:
- Configurable minimum and maximum values.
- Indeterminate mode for ongoing tasks without a definite end.
- Options for text visibility, animation, and striped designs for better visual feedback.
Setting values
The ProgressBar component allows setting and getting its current value, minimum, and maximum limits.
ProgressBar bar = new ProgressBar();
bar.setMin(0);
bar.setMax(100);
bar.setValue(50);
Orientation
The ProgressBar
can be oriented horizontally or vertically.
Show Code
- Java
Indeterminate state
The ProgressBar
supports an indeterminate state for tasks with unknown completion time.
Show Code
- Java
Text and text visibility
By default when created, the progress bar displays the percentage complete in the format XX%
. Using the setText()
method, you can use the placeholder {{x}}
to get the current value as a percentage. Additionally, you can use the placeholder
{{value}}
to get the raw current value.
ProgressBar bar = new ProgressBar(15, "Downloading: {{x}}%");
Styling
Themes
The ProgressBar
component comes with
Show Code
- Java
Shadow Parts
These are the various parts of the shadow DOM for the component, which will be required when styling via CSS is desired.
CSS Properties
These are the various CSS properties that are used in the component, with a short description of their use.
Reflected Attributes
The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes.
Best practices
- Use Appropriate Minimum and Maximum Values: Set the minimum and maximum values to accurately reflect the task's range.
- Update Progress Regularly: Continuously update the progress value to provide real-time feedback to users.
- Utilize Indeterminate State for Unknown Durations: Use the indeterminate state for tasks with unpredictable durations to indicate ongoing progress.
- Show Text for Better User Feedback: Display text on the progress bar to offer additional context about the task's progress.