13

Has anyone been able to make the apex:actionStatus tag display in the popup spinner style, like this:

enter image description here

It should render center of screen, perhaps with a masking effect.

If I'm not mistken, the extJS framework has a popup control that might do the trick.

1
  • 3
    Keir Bowden's book - Visualforce Development Cookbook has a recipe for this; book is chock-o-block of good VF and VF+Js stuff (and I'm not Keir - he goes by the handle Bob Buzzard)
    – cropredy
    Feb 6, 2015 at 20:23

5 Answers 5

14

Here's one such example:

public class loadingSpinnerCtrl {
    public void spin() {
        long now = datetime.now().gettime();
        while(datetime.now().gettime()-now<5000); // Busy loop for 5000 ms
    }
}

Page:

<apex:page controller="loadingSpinnerCtrl">
    <apex:form id="form">
        <apex:commandButton action="{!spin}" value="Show Spinner" rerender="form" status="status" />
        <apex:actionStatus id="status">
            <apex:facet name="start">
            <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: black;">
                &nbsp;
            </div>
            <div style="position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 30% 50%">
                <img src="http://upload.wikimedia.org/wikipedia/commons/e/ed/Cursor_Windows_Vista.gif" />
            </div>
            </apex:facet>
        </apex:actionStatus>
    </apex:form>
</apex:page>

Feel free to adjust CSS as you like. Works in my developer org.

Edit: Moved margin up by 20%. Now much closer to center of screen.

2
  • nevermind on that one, does the command button dissapear here when the spinner appears ? right now I have the buttons in the "stop" facet and they dissapear, I don't want that.
    – MadMax
    Sep 25, 2018 at 18:39
  • 1
    @madmax Whatever is in the stop facet disappears when the start facet appears. Think of it as a toggle. In my example, the button is outside the actionStatus, so it will always display. However, this version also has a mostly opaque background to simulate darkening the screen. You could take this out if you wanted to, but this answer was specifically designed after the question's intent.
    – sfdcfox
    Sep 25, 2018 at 18:49
24

I adopted sfdcfox's answer, lightening the mask opacity, adding a white background window and text. I also used the Salesforce provided loading.gif.

Here's the final result:

enter image description here

Here's the code:

<apex:actionStatus id="status">
    <apex:facet name="start">
    <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.25; z-index: 1000; background-color: black;">
        &nbsp;
    </div>
    <div style="position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 15% 50%">
        <div style="display: inline-block; padding: 2px; background-color: #fff; width: 125px;">
            <img src="/img/loading.gif" style="float: left; margin: 8px;" />
            <span style="display: inline-block; padding: 10px 0px;">Please Wait...</span>
        </div>
    </div>
    </apex:facet>
</apex:actionStatus>

Adjust the margin in the second div margin: 15% 50% to position the popup where you want.

5

You don't need to use controllers for this:

<style>
    .spinnerBg{
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #000;
        opacity: 0.2;
        z-index: 999999;
    }
    .spinner{
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: url("/img/loading32.gif");
        background-size: 16px;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        z-index: 9999999;
        opacity: 1;
    }
</style>

<apex:actionStatus id="spinnerStatus">
    <apex:facet name="start">
        <div class="spinnerBg" />
        <div class="spinner" />
    </apex:facet>
</apex:actionStatus>

then you just reference the status id on your action as usual:

<apex:commandButton status="spinnerStatus"..
1

I've done it using "block unblock ui" for jquery. Find deals here . You just have to use "/loading.gif" to display that image.

-1

Have you tried to make use of an apex:facet?

Here is a reference that might be helpful: http://www.eltoro.it/ArticleViewer?id=a07A000000Pw53AIAR

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .