AjaxFramework Status

<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>