ProgressBar

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

Client Side ProgressBar



Advanced Ajax ProgressBar



0%

Static Display

50%

Source

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

    <h3>Client Side ProgressBar</h3>
    <p:commandButton value="Start" id="start" type="button" onclick="start()" widgetVar="startButton1"/>
    <p:commandButton value="Cancel" id="cancel" type="button" onclick="cancel()" />

    <p:progressBar id="progressBarClient" widgetVar="pbClient" style="width:300px"/>

    <h3>Ajax ProgressBar with Growl Integration</h3>
    <p:commandButton value="Start" type="button" onclick="PF('pbAjax').start();PF('startButton2').disable();" widgetVar="startButton2" />
    <p:commandButton value="Cancel" actionListener="#{progressBean.cancel}" oncomplete="pbAjax.cancel();startButton2.enable();" />

    <p:progressBar widgetVar="pbAjax" ajax="true" value="#{progressBean.progress}" labelTemplate="{value}%" styleClass="animated">
        <p:ajax event="complete" listener="#{progressBean.onComplete}" update="growl" oncomplete="startButton2.enable()"/>
    </p:progressBar>

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

</h:form>
                    
<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>