Popup "spinner" style apex:actionStatus

  • 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.

    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)

  • sfdcfox

    sfdcfox Correct answer

    6 years ago

    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

    @madmax I'm not sure I understand your question.

    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 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.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM