<a:form>
    <a:growl id="growl" />

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

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

    <h3>Static Display</h3>
    <a:progressBar value="50" labelTemplate="{value}%" displayOnly="true"/>
</a: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>