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>
<br>
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`.
![Progress with p:ajaxStatus and p:blockUI][1]
For more insight, please get the [example project][1] project][2] or have a look at the demos for [p:ajaxStatus][2] [p:ajaxStatus][3] and [p:blockUI][3] [p:blockUI][4] on the [PrimeFaces Showcase][4].Showcase][5].
<br>
<br>
Note: This question and answer was [originally posted][5] posted][6] by Heinrich Spreiter on his [Xpert.ivy Hacker blog][6]. blog][7]. Many thanks to Henry for his enthusiastic work.
[1]: /upfiles/ajaxstatusblockui.png
[2]: http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms
[2]: [3]: http://www.primefaces.org/showcase/ui/ajaxStatusHome.jsf
[3]: [4]: http://www.primefaces.org/showcase/ui/blockUI.jsf
[4]: [5]: http://www.primefaces.org/showcase/ui/home.jsf
[5]: [6]: http://blog.xpertivyhacker.ch/2012/11/xpertivy-primepush-installieren.html
[6]: [7]: http://blog.xpertivyhacker.ch/
