AjaxStatus is a global indicator to provide feedback about the ongoing ajax request. This page has two AjaxStatus components, one with facet driven declarative approach and the other one using callbacks.
<style>
.loading-icon {
font-size: 3rem;
color: var(--primary-color);
}
</style>
<div class="card text-secondary">
<p:ajaxStatus styleClass="block mb-4">
<f:facet name="default">
<h:outputText value="Status: StandBy" />
</f:facet>
<f:facet name="start">
<i class="pi pi-spin pi-spinner loading-icon" aria-hidden="true"></i>
</f:facet>
<f:facet name="complete">
<h:outputText value="Status: Completed" />
</f:facet>
</p:ajaxStatus>
<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()"/>
<p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
<div class="text-center">
<i class="pi pi-spin pi-spinner loading-icon" aria-hidden="true"></i>
</div>
</p:dialog>
<h:form>
<p:commandButton value="Send" styleClass="ui-button-outlined ui-button-secondary" />
</h:form>
</div>