Where to find the AJAX indicator image?

Question

I would like the same loading indicator gif as on the Primefaces Showcase: http://www.primefaces.org/showcase/ui/ajax/basic.xhtml

There is no reference to it in the source. Where is it defined ?

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

With development tools you get the (re)source.

May i suggest using a SVG with real transparency instead. Looks much better! There are several online generators out there.

I am not sure how to use this.

The indicator image is used with <p:ajaxStatus /> in combination with <p:graphicImage /> shown in PrimeFaces ShowCase and explained in PrimeFaces Documentation. To show it in the lower right corner of the page like on the page you referenced you have to add custom style like:

<p:ajaxStatus
    style="position: fixed; bottom: 0px; right: 0px; z-index: 9999999999;"
>
    ...
</p:ajaxStatus>

edited May 23 '17 at 12:32

Community

1
1

answered Aug 11 '16 at 09:44

irieill

1,203
10
32

Thanks, but I am not sure how to use this. The problem is not the image itself, but where and how to reference it in the code ? – Tim Aug 11 '16 at 11:05
@Tim So why did you not ask this directly in your question? – irieill Aug 11 '16 at 11:09
@Tim Updated answer. – irieill Aug 11 '16 at 11:24
@irieill: But why does it work in the basic example I posted ? There is no ajaxStatus in the source ? – Tim Aug 11 '16 at 11:44
@Kukeltje Kidding? Notwithstanding that the PrimeFaces guys will not be happy, if the image is refereced from their servers, reference it just like every image directly via _name_ attribute of `` or even with _src_ attribute of a simple ``. If there is no copywrite issue, you better download and add it to your webapp resources and [reference](http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used) it from there. But i think that should not be part of the answer as it is basic jsf knowlegde, is it not? – irieill Aug 11 '16 at 11:45
@Tim I think it works because it is not designed as part of the special page you referenced, but of (nearly) all pages of the ShowCase as a feature of the ShowCase (webapp) itself and not as demonstration. – irieill Aug 11 '16 at 11:52
@Tim I think with source you mean the code snippet on the [ShowCase](http://www.primefaces.org/showcase/ui/ajax/basic.xhtml)? Because in the (real) [source code](https://github.com/primefaces/showcase/blob/master/src/main/webapp/WEB-INF/template.xhtml#L676) of the ShowCase the `` is there very well. – irieill Aug 11 '16 at 12:07

score 0 · Answer 2 · answered Nov 24 '17 at 11:12

Generate and download from: http://www.ajaxload.info/ (ajax-loader.gif)

Copy to (for example): webapp/resources/images

Code:

            <p:ajaxStatus style="height:16px">
                <f:facet name="start">
                    <h:graphicImage name="images/ajax-loader.gif" />
                </f:facet>
                <f:facet name="complete">
                    <h:outputText value="" />
                </f:facet>
            </p:ajaxStatus>

Where to find the AJAX indicator image?

2 Answers2