Skip to main content

ProgressBar

Open in ChatGPT
Shadow dwc-progressbar 24.02
Java API

The ProgressBar component visually represents the completion status of an operation. As work advances, a rectangle gradually fills to reflect the current percentage. The bar can also display a textual representation of its value, and supports both determinate and indeterminate states for tasks with known or unknown duration.

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.

The following example shows a striped, animated progress bar with start, pause, and reset controls:

Show Code

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

Indeterminate state​

The ProgressBar supports an indeterminate state for tasks with unknown completion time.

Show Code

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 themes built in for quick styling without the use of CSS. These themes are pre-defined styles that can be applied to buttons to change their appearance and visual presentation. They offer a quick and consistent way to customize the look of ProgressBars throughout an app.

Show Code

Loading...

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.