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) {
//dovar somethingloadingDivElt = document.getElementById("LoadingvfDIV");
loadingDivElt.style.display = 'none' ;
console.log('hiding spinnner');
});
});
</script>
</apex:page>