ProgressBar shows the completion status of a process. The progress can be determinate or indeterminate. Use ProgressBar to show an ongoing process that takes a noticeable time to finish.

progress bar background task

Component’s XML-name: progressBar.

Determinate Process

For the example below, we will use the background tasks mechanism.

Let’s simulate a situation where you can track the current stage of the process.

<progressBar id="progressBar" width="100%" />
protected ProgressBar progressBar;
protected BackgroundWorker backgroundWorker;

private static final int ITERATIONS = 6;

protected void onInit(InitEvent event) {
    BackgroundTask<Integer, Void> task = new BackgroundTask<Integer, Void>(100) {
        public Void run(TaskLifeCycle<Integer> taskLifeCycle) throws Exception {
            for (int i = 1; i <= ITERATIONS; i++) {
                TimeUnit.SECONDS.sleep(1); (1)
            return null;

        public void progress(List<Integer> changes) {
            double lastValue = changes.get(changes.size() - 1);
            progressBar.setValue(lastValue / ITERATIONS); (2)

    BackgroundTaskHandler taskHandler = backgroundWorker.handle(task);
1 - some task that takes time to complete
2 - setting the value of the component, it should be a double number between 0.0 and 1.0

Indeterminate Process

If a running process cannot send information about the progress, the ProgressBar can display an indeterminate state of the indicator. To show an indeterminate state, set the indeterminate attribute to true. The default value is false.

For example:

<progressBar indeterminate="true" width="200px"/>
progress bar indeterminate


To make the progress bar indicator appear as a dot that progresses over the progress bar track instead of a growing bar, uses stylename attribute with point value.

progress bar point

By default, an indeterminate progress bar is displayed as a horizontal bar. To make it a spinning wheel, uses stylename attribute with indeterminate-circle value.

progress bar circle

Events and Handlers


See ValueChangeEvent.

Programmatic registration of the event handler: use the addValueChangeListener() component method.


Programmatic usage: call the setContextHelpIconClickHandler() component method.

To generate handler method stubs in the Studio, use the Generate Handler button in the top panel of the screen controller code. Or you can select the component in the screen descriptor layout and use the Handlers tab of the Component Inspector panel.

All XML Attributes

You can view and edit attributes applicable to the component using the Component Inspector panel of the Studio’s Screen Designer.