Once the CSS div loads, it will replace the progress bar that is currently displayed on the screen.
The CSS div is dynamic and takes some time to fetch the necessary data for display. To indicate this loading process, a Loading bar is shown before the CSS div is loaded completely.
<div id="'+levelDivId+'" class="mainContainerLevel" style="display:none">
<div class="nav-header-top">
// code responsible for fetching data
</div>
A progress bar is shown first before displaying the content inside the following div:
<div id="'+levelDivId+'" class="mainContainerLevel"> </div>
The progress bar will be visible for 2-3 seconds before the dynamic div is displayed.
To accomplish this functionality, a piece of javascript is needed.
Any assistance provided would be greatly appreciated.
Solution Found, here's how:
We have a mainContainer which acts as a container for all elements.
Start by adding the "loading" div to show the loading state:
$("#mainContainer").append("<div id='loading_MainMenu' class='mainContainerl' style='display: block;'><br>
<p>Loading Data....</p> </div>");Next, include the Data div which needs time to load beneath this comment:
Hide the "loading" div once the Data div is ready to be displayed:
$("#loading_MainMenu").hide();
Finally, append the Data div to the mainContainer like so:
$("#mainContainer #"+DataDiv).append("</div> </div>");That concludes the procedure.