while loading Visual force Page Show Round Progress Bar By clicking a Button in on click javascript

Question

By Now on clicking a button it loads Visualforce Page in on click Javascript mode in a Button. My New Requirement is, In on click javascript Before Loading Visualforce page progress bar should appear.

Like this,

I have Referred this Links

https://jsfiddle.net/kimmobrunfeldt/mxjj6jom/

I can do it with Visualforce page mode in a bUtton instaed of that i Want in Onclick Java script mode

Answer 1

Here's a self-contained example that demonstrates this. I did not use jQuery at all; you can write this fully native in Visualforce. Feel free to replace any parts you don't like.

Controller

This code just waits approximately 3 seconds so you can see how the page loads.

public class LoadingDemo {
    public void wait3Seconds() {
        Long startTime = DateTime.now().getTime();
        while(DateTime.now().getTime()-startTime<3000);
    }
}

Page

We use apex:actionStatus to render a pretty animation while the page loads.

<apex:page controller="LoadingDemo">
    <apex:form id="form">
        <apex:actionFunction name="loadPageContent" action="{!wait3Seconds}" status="loading" reRender="form" />
        This area hosts the main content. You can put whatever you want here.
    </apex:form>
    <apex:actionStatus id="loading">
        <apex:facet name="start">
        <div style="z-index: 1000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: black; opacity: 0.25">
            
        </div>
        <div style="z-index: 1001; text-align: center; vertical-align: middle; position: fixed; top: 50%; left: 50%; padding: 1em; margin: -2em -10em; width: 20em; height: 32px; background: white; border-radius: 5px">
            <img src="/img/loading32.gif" style="vertical-align: middle; padding-right: 1em" />
            Loading...
        </div>
        </apex:facet>
    </apex:actionStatus>
    <script>
        loadPageContent();
    </script>
</apex:page>