How to show spinner on VF page embedding a LTNG component while its still loading?

Question

I have a VF page containing lightning component using ltng out. It is taking time to load(about 6 seconds) , and in that time I want to show spinner to user. How can this be implemented?

My VF Page:

<apex:page >
<script src="https://MySSDDomain-dev-dev-ed.my.salesforce.com/lightning/lightning.out.js" />
 <apex:stylesheet value="/resource/SLDS214/assets/styles/salesforce-lightning-design-system-ltng.css"/

<apex:includeLightning />

       <div  id="LoadingvfDIV" class="slds-spinner_container">
            <div class="slds-spinner--brand slds-spinner slds-spinner--small" role="alert">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
             </div>
        </div> 

    <div id="lightning" />

<script>
$Lightning.use("c:UserPageApplication", function() {
    $Lightning.createComponent("c:UserPageComponent",
                               {},
                               "lightning",
                               function(cmp) {
                                   var loadingDivElt = document.getElementById("LoadingvfDIV");
                                   loadingDivElt.style.display = 'none' ;
                                   console.log('hiding spinnner');
                               });
});
</script>

Answer 1

You can use a DIV and SLDS spinner

Here is a sample of what we use on my project.

<div id="LoadingvfDIV" class="slds-spinner_container">
    <div class="slds-spinner slds-spinner--large" aria-hidden="false" role="alert">
        <div class="slds-spinner__dot-a"></div>
        <div class="slds-spinner__dot-b"></div>
    </div>
</div>

<div class="slds-m-around--xx-small">
    <div id="lightningvfDIV" style="min-height: 100vh !important;display:none;"/>
</div>

<script>
    $Lightning.use("c:AppWebApp4vf", function() {
        $Lightning.createComponent("c:CmpWebApp", // Component name
                {},
                "lightningvfDIV",
                function(cmp) {
                    var loadingDivElt = document.getElementById("LoadingvfDIV");
                    loadingDivElt.style.display = 'none';
                    var ltngDivElt = document.getElementById("lightningvfDIV");
                    ltngDivElt.style.display = 'block';
                    console.log('AppWebApp VF Page includer initialized');
                });
    });
</script> 

Answer 2

You can add a loading section or spinner in a div, directly at the top of your Visualforce Page (let's say before your <div id="lightning" />):

<div id="loading">
    // Put your spinner here
</div>

Then, in the callback of your $Lightning.createComponent call, just hide this div by replacing the //do something comment:

document.getElementById('loading').style.display = 'none';

Answer 3

Please include SLDS in the VF page. The code below is working for me.

<apex:slds />

<div role="status" class="slds-spinner slds-spinner_large slds-spinner_brand">
    <span class="slds-assistive-text">Loading...</span>
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
</div>