Loader Ajax

Post Reply
User avatar
Jarciano
Posts: 66
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

12 Aug 2020, 14:03

Hello,

I would like to make some improvements to the ajax loader icon layout, since users are reporting that they do not realize that the icon is loading in the corner, how do I center it on the screen? and maybe also put some modal effect to give a highlight so that the user waits for the loading of the ajax.

https://imgur.com/iLsqyEQ
--
Jarciano Silva
CEO - Chief Executive Officer
ajotta | https://ajotta.com

mert.sincan
Posts: 4603
Joined: 29 Jun 2013, 12:38

24 Aug 2020, 17:46

Hi,

Please try the following code instead of p:ajaxStatus in the current template.xhtml;

Code: Select all

...
           <p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />
             
            <p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false" style="background-color: transparent; box-shadow: none; border: 0 none;">
                <i class="fa fa-circle-o-notch fa-spin" style="font-size: 50px; color: #2196F3" aria-hidden="true"></i>
            </p:dialog>
...
Best Regards,

User avatar
Jarciano
Posts: 66
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

24 Aug 2020, 21:50

Hello,

It will really be perfect, I just need to remove the scroll bars that are being created according to the image. any solution for that little detail?

https://imgur.com/lhi4Iso
--
Jarciano Silva
CEO - Chief Executive Officer
ajotta | https://ajotta.com

mert.sincan
Posts: 4603
Joined: 29 Jun 2013, 12:38

26 Aug 2020, 13:57

Hi,

You can add width and height styles to dialog.

Code: Select all

<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />
    
<p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false" style="background-color: transparent; box-shadow: none; border: 0 none; width: 120px; height: 100px;">
    <i class="fa fa-circle-o-notch fa-spin" style="font-size: 50px; color: #2196F3" aria-hidden="true"></i>
</p:dialog>

Post Reply

Return to “Babylon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests