Increase Diamond Loading Icon Size

[alihasanash]

I want to increase or enhance diamond loading icon at the bottom of the page.

I want this icon to be in the middle of the page and make the whole of page a bit dark while loading the page.
How do I make it and what css should I change?

[mert.sincan]

Hi,

You can use p:ajaxStatus with p:dialog component for this feature. Exp;

Code: Select all

// template.xhtml
....
        <p:ajaxStatus onstart="PF('myDialog').show()" oncomplete="PF('myDialog').hide()" />
        <p:dialog widgetVar="myDialog" styleClass="layout-loading-dialog" modal="true" draggable="false" closable="false">
            <i class="pi pi-spin pi-spinner" style="font-size: 3rem"></i>
        </p:dialog>
...

Note: please update the default p:ajaxStatus in template.xhtml.

Custom style;

Code: Select all

     <style>
        body .layout-loading-dialog.ui-dialog .ui-dialog-titlebar {
            display: none;
        }

        body .layout-loading-dialog.ui-dialog .ui-dialog-content {
            padding: 1rem;
        }
   </style>

You can override my custom css according to your needs.

Best Regards,

[alihasanash]

Thank you! Problem solved.

[mert.sincan]

Glad to hear, thanks a lot for the update!

Best Regards,