9

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.

  • 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 '15 at 20:23
11

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.

  • I can't figure out the bottom div cause my buttons to dissapear in the "stop" facet – SallyRothroat Sep 25 '18 at 16:22
  • @madmax I'm not sure I understand your question. – sfdcfox Sep 25 '18 at 16:31
  • 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. – SallyRothroat Sep 25 '18 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 '18 at 18:49
17

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.

3

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.