How to create a loading indicator in a HTML user dialog?

PrimeFaces offers 2 components for this, p:ajaxStatus and p:blockUI. See the following example form in the Html Dialog:

<h:form>
        <p:panel header="p:ajaxStatus and p:blockUI Demo" id="panel">
                <p:panelGrid columns="1">
                        <p:ajaxStatus style="width:220px;height:19px;">
                                <f:facet name="start">
                                        <h:graphicImage library="ivy-cms" name="Images/loader" />
                                </f:facet>

                                <f:facet name="complete">
                                        <h:outputText value="Done!" />
                                </f:facet>
                        </p:ajaxStatus>
                        <p:commandButton id="btn" value="Trigger ajaxStatus and blockUI"
                                actionListener="#{logic.doSomething}" />
                        <p:commandButton value="Do not trigger ajaxStatus and blockUI"
                                actionListener="#{logic.doSomething}" global="false"/>

                </p:panelGrid>
        </p:panel>
        <p:blockUI block="panel" trigger="btn">
                LOADING<br />
                <h:graphicImage library="ivy-cms" name="Images/loader2" />
        </p:blockUI>
</h:form>

In lines 4 to 12 you see how to configure p:ajaxStatus. It is triggered every time when a AJAX request is fired, e.g. when a p:commandButton is pressed. As soon as the request is fired, the content of the start facet is shown. As soon as the request ends, the content of the complete facet is displayed.

If you wish not to trigger p:ajaxStatus on a p:commandButton, then you have to set the global attribute to false like in line 15.

p:blockUI does work differently, Here you have to define which components are blocked (block="panel") and which component triggers the block (trigger="btn"). See lines 20 to 23.

Any content can be used inside p:ajaxStatus or p:blockUI.

For more insight, please get the example project or have a look at the demos for p:ajaxStatus and p:blockUI on the PrimeFaces Showcase.

Note: This question and answer was originally posted by Heinrich Spreiter on his Xpert.ivy Hacker blog. Many thanks to Henry for his enthusiastic work.