text: ---
  title: ProgressBar
  order: 29
  layout: page
  ---
  
  [[components.progressbar]]
  = ProgressBar
  
  ifdef::web[]
  [.sampler]
  image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/progress-bar"]
  endif::web[]
  
  The [classname]#ProgressBar# component allows visualizing progress of a task.
  The progress is specified as a floating-point value between 0.0 and 1.0.
  
  [[figure.components.progressbar.basic]]
  .The [classname]#ProgressBar# component
  image::img/progressbar-basic.png[width=30%, scaledwidth=70%]
  
  To display upload progress with the [classname]#Upload# component, you can
  update the progress bar in a [interfacename]#ProgressListener#.
  
  When the position of a progress bar is done in a background thread, the change
  is not shown in the browser immediately. You need to use either polling or
  server push to update the browser. You can enable polling with
  [methodname]#setPollInterval()# in the current UI instance. See
  <<../advanced/advanced-push#advanced.push,"Server Push">>
  for instructions about using server push. Whichever method you use to update the
  UI, it is important to lock the user session by modifying the progress bar value
  inside [methodname]#access()# call, as described in
  <<../advanced/advanced-push#advanced.push.running,"Accessing UI from Another Thread">>.
  
  [source, java]
  ----
  ProgressBar bar = new ProgressBar(0.0f);
  layout.addComponent(bar);
  
  layout.addComponent(new Button("Increase", click -> {
      float current = bar.getValue();
      if (current < 1.0f)
          bar.setValue(current + 0.10f);
  }));
  ----
  
  [[components.progressbar.indeterminate]]
  == Indeterminate Mode
  
  In the indeterminate mode, a non-progressive indicator is displayed
  continuously. The indeterminate indicator is a circular wheel in the built-in
  themes. The progress value has no meaning in the indeterminate mode.
  
  [source, java]
  ----
  ProgressBar bar = new ProgressBar();
  bar.setIndeterminate(true);
  ----
  
  [[figure.components.progressbar.indeterminate]]
  .Indeterminate progress bar
  image::img/progressbar-indeterminate.png[width=15%, scaledwidth=40%]
  
  [[components.progressbar.thread]]
  == Doing Heavy Computation
  
  The progress bar is typically used to display the progress of a heavy
  server-side computation task, often running in a background thread. The UI,
  including the progress bar, can be updated either with polling or by using
  server push. When doing so, you must ensure thread-safety, most easily by
  updating the UI inside a [methodname]#UI.access()# call in a
  [interfacename]#Runnable#, as described in
  <<../advanced/advanced-push#advanced.push.running,"Accessing
  UI from Another Thread">>.
  
  
  [[components.progressbar.css]]
  == CSS Style Rules
  
  
  [source, css]
  ----
  .v-progressbar, v-progressbar-indeterminate {}
    .v-progressbar-wrapper {}
      .v-progressbar-indicator {}
  ----
  
  The progress bar has a [literal]#++v-progressbar++# base style.
  The progress is an element with [literal]#++v-progressbar-indicator++# style inside the wrapper, and therefore displayed on top of it.
  When the progress element grows, it covers more and more of the animated background.
  
  The progress bar can be animated (some themes use that).
  Animation is done in the element with the [literal]#v-progressbar-wrapper# style, by having an animated GIF as the background image.
  
  In the indeterminate mode, the top element also has the
  [literal]#++v-progressbar-indeterminate++# style.
  The built-in themes simply display the animated GIF in the top element and have the inner elements disabled.
  