Following example shows how to use PrimeFaces ProgressBar on the client side.

Example

JSF page

src/main/webapp/index.xhtml

<h:body>
    <h2>PrimeFaces - Client ProgressBar Example</h2>
    <h:form>
        <p:commandButton value="Perform long Task"
                         type="button"
                         onclick="startTask()"
                         widgetVar="taskButton"/>
        <br/><br/>
        <p:progressBar  widgetVar="progressBar"
                        style="width:500px"/>
    </h:form>

    <script type="text/javascript">
    //ECMAScript 2015 class syntax
    class TaskManager{
      constructor() {
        this.numTasks = 10;
        this.currentTaskNum = 0;
      }

      getCurrentTaskNum(){
        return this.currentTaskNum;
      }

      getNumTasks(){
        return this.numTasks;
      }

      hasTask(){
        return this.numTasks > this.currentTaskNum;
      }

      performTask(){
        this.currentTaskNum++;
        //simulating long running task
        //increase/decrease loops if it's too fast/slow on your machine
        for(var i = 0 ; 10000 > i; i++){
          //do something
          new Array(10000).fill("test").reverse();
        }
      }

      reset(){
        this.currentTaskNum = 0;
      }
    }

    var taskManager = new TaskManager();
    function doNextTask() {
      if(!taskManager.hasTask()){
          PF('taskButton').enable();
          return;
      }
      //queue tasks
      setTimeout(function(){
          taskManager.performTask();
          var percent = taskManager.getCurrentTaskNum()*100 / taskManager.getNumTasks()
          PF('progressBar').setValue(percent);
          doNextTask();
      }, 0)
    }

    function startTask() {
      PF('taskButton').disable();
      taskManager.reset();
      PF('progressBar').setValue(0);
      doNextTask();
    }
 </script>
</h:body>

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• JDK 1.8
• Maven 3.3.9