ProgressBar ProgressBar is a process status indicator that can either work on client side or integrate with server side via ajax.

Client ProgressBar



Ajax ProgressBar



0%

Static Display

50%
<h:form>   
    <p:growl id="growl" />

    <h3 style="margin-top:0">Client ProgressBar</h3>
    <p:commandButton value="Start" id="start" type="button" onclick="start()" widgetVar="startButton1"/>
    <p:commandButton value="Cancel" id="cancel" type="button" onclick="cancel()" />
    <br /><br />
    <p:progressBar id="progressBarClient" widgetVar="pbClient" style="width:300px"/>

    <h3>Ajax ProgressBar</h3>
    <p:commandButton value="Start" type="button" onclick="PF('pbAjax').start();PF('startButton2').disable();" widgetVar="startButton2" />
    <p:commandButton value="Cancel" actionListener="#{progressBarView.cancel}" oncomplete="PF('pbAjax').cancel();PF('startButton2').enable();" />
    <br /><br />
    <p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBarView.progress}" labelTemplate="{value}%" styleClass="animated" global="false">
        <p:ajax event="complete" listener="#{progressBarView.onComplete}" update="growl" oncomplete="PF('startButton2').enable()"/>
    </p:progressBar>

    <h3>Static Display</h3>
    <p:progressBar value="50" labelTemplate="{value}%" displayOnly="true"/>
</h:form>

<style tyle="text/css">
    .animated .ui-progressbar-value { 
        background-image: url("/showcase/javax.faces.resource/demo/images/pbar-ani.gif.xhtml"); 
    }
</style>

<script type="text/javascript">
function start() {
    PF('startButton1').disable();

    window['progress'] = setInterval(function() {
        var pbClient = PF('pbClient'),
        oldValue = pbClient.getValue(),
        newValue = oldValue + 10;

        pbClient.setValue(pbClient.getValue() + 10);

        if(newValue === 100) {
            clearInterval(window['progress']);
        }


    }, 1000);
}

function cancel() {
    clearInterval(window['progress']);
    PF('pbClient').setValue(0);
    PF('startButton1').enable();
}
</script>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.1-SNAPSHOT on Mojarra-2.2.8.