Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Progress Bar



  • Nuxeo Web UI


It allows you to display a progress bar when using a property related to a status (in percentage)


Integrate the visual element in any result layouts or document layouts.


Studio Modeler

  • Create a property, of type Integer or Floating Point, with interval value between 0 and 100.

Studio Designer

  • Select the layout you need to edit
  • Add the following CSS contribution in the <style> tag:
.wrapper {
        width: 500px;
.progress-bar {
        width: 100%;
        background-color: #e0e0e0;
        padding: 3px;
        border-radius: 3px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);

      .progress-bar-fill {
        display: block;
        height: 22px;
        background-color: #659cef;
        border-radius: 3px;
        transition: width 500ms ease-in-out;
  • In the <template> tag, add and adapt with your custom property:
      <div class="wrapper">
        <div class="progress-bar">
          <span class="progress-bar-fill" style="width:[[]]%"><center>[[]]&nbsp;%</center></span>


  • You can freely update the colour of the loading bar or other styling options.

Documentation Links

You can’t perform that action at this time.