progressBar

progressBar shows the completion status of a long-running task.

XML Element

progressBar

Java Class

ProgressBar

Basics

LIVE DEMO

A standard progress bar takes values between 0.0 and 1.0, representing the progress of a task from 0% to 100%.

<progressBar id="progressBar" width="100%"/>

Progress Updates

LIVE DEMO

The progress value is commonly updated within the context of an ongoing task. This allows the progress bar to accurately reflect the current state of the task.

Consider an example of a simple background task that updates the progressBar value:

XML
<hbox padding="false">
    <h4 text="ProgressBar with indicator"/>
    <button id="controlButton"
            icon="PLAY" classNames="link-button"/>
</hbox>
<hbox padding="false" justifyContent="BETWEEN" width="100%">
    <span id="labelSpan" text="Ready to start"/>
    <span id="percentSpan" text="0%"/>
</hbox>
<progressBar id="progressBar" width="100%"/>
<h4 text="Indeterminate ProgressBar"/>
<progressBar indeterminate="true" width="100%"/>
Java
protected static final int ITERATIONS = 20;

@ViewComponent
protected ProgressBar progressBar;
@ViewComponent
protected Span labelSpan;
@ViewComponent
protected Span percentSpan;
@ViewComponent
protected JmixButton controlButton;

@Autowired
protected BackgroundWorker backgroundWorker;

protected BackgroundTaskHandler<Void> taskHandler;

protected void runNewTask() {
    taskHandler = backgroundWorker.handle(createBackgroundTask());
    taskHandler.execute();
}

protected BackgroundTask<Integer, Void> createBackgroundTask() {
    return new BackgroundTask<>(100, TimeUnit.SECONDS) {

        @Override
        public Void run(TaskLifeCycle<Integer> taskLifeCycle) throws Exception {
            for (int i = 1; i <= ITERATIONS; i++) {
                TimeUnit.SECONDS.sleep(1);
                taskLifeCycle.publish(i);
            }

            return null;
        }

        @Override
        public void progress(List<Integer> changes) {
            double lastValue = changes.get(changes.size() - 1);
            double value = lastValue / ITERATIONS;

            if (value < 1) {
                labelSpan.setText("In progress");
            } else {
                labelSpan.setText("Done");
                controlButton.setIcon(VaadinIcon.REFRESH.create());
            }

            progressBar.setValue(value);
            percentSpan.setText(Double.valueOf(value * 100).intValue() + "%");
        }
    };
}

@Subscribe("controlButton")
protected void onControlButtonClick(ClickEvent<JmixButton> event) {
    if (taskHandler == null || taskHandler.isDone() || taskHandler.isCancelled()) {
        runNewTask();

        event.getSource().setIcon(VaadinIcon.STOP.create());
    } else if (taskHandler != null && taskHandler.isAlive()) {
        taskHandler.cancel();

        labelSpan.setText("Canceled");
        event.getSource().setIcon(VaadinIcon.REFRESH.create());
    }
}

Modes

LIVE DEMO

A progress bar can either be determinate or indeterminate depending on the nature of the task and the availability of progress information.

Determinate Progress

By default, progressBar shows progress in the determinate mode. This mode provide users with a visual representation of remaining time to complete the task.

<progressBar id="progressBar" width="100%"/>

Use a determinate progress bar when the time required for completion is known in advance or the progress can be tracked.

Indeterminate Progress

By setting the indeterminate attribute to true you can switch the progress bar to operate in the indeterminate mode. When in indeterminate mode progressBar cycles repeatedly along the length of the bar without showing a specific progress value.

<progressBar indeterminate="true" width="100%"/>

Use this mode for tasks which do not share a progress value or to communicate that the task is running continuously.

Value Range

By default, a progress bar takes values from 0.0 to 1.0, representing 0% and 100% respectively. This is the standard behavior that can be changed using the min and max attributes.

For instance, if you have a task with 10 steps, you can set min="1" and max="10" to match the task’s progress range. Reaching the 5th step indicates that the progress value has reached 5 as well:

<progressBar min="0" max="10" value="5"/>

Progress Dialog

If it is necessary for the user to wait for the completion of a task, a background task dialog can be used.

This dialog blocks user interaction with the rest of the application until the task is either completed or is canceled by the user.

Theme Variants

LIVE DEMO

Use the themeNames attribute to apply one or more theme variants.

Variant Description Supported By

success

Indicates satisfactory progress or nearing completion.

Aura, Lumo

error

Indicates unsatisfactory progress or draws attention to a stalled or failed process.

Aura, Lumo

contrast

Improves visibility.

Aura, Lumo

Attributes

The following attributes are specific to progressBar:

Name Description Default

indeterminate

Enables or disables the indeterminate progress mode.

—

max

Sets the maximum progress value.

—

min

Sets the minimum progress value.

—

value

Sets the component value.

—

The following shared attributes are supported by progressBar:

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - themeNames - visible - width

Handlers

The following shared handlers are supported by progressBar:

AttachEvent - DetachEvent

See Also