Search code examples
javascriptcssjsondompreloader

JavaScript which will add a progress bar before a CSS div is loaded?

Once the CSS div is loaded, progress bar will be replaced by that CSS div.

CSS div is a dynamic one, it takes some time to fetch the data to be displayed and hence I want to show a Loading bar before CSS is loaded.

<div id="'+levelDivId+'" class="mainContainerLevel" style="display:none"> 

<div class="nav-header-top">

// code which will be fetching my data

</div>

I want to load a progress bar before 

<div id="'+levelDivId+'" class="mainContainerLevel"> </div>

Progress bar will be displayed for 2-3 seconds then this div will be displayed.

I need a javascript for achieving this.

Please Help.

Problem Solved, this is how:

We have a mainContainer div which holds everything.

First we load the "loading" div

$("#mainContainer").append("<div id='loading_MainMenu' class='mainContainerl' style='display: block;'>
<p>Loading Data....</p> </div>");

//Data div which takes some time to fetch the data to be displayed comes here

We hide the "loading" div before displaying the data div

$("#loading_MainMenu").hide();

Now we append the Data div to mainContainer

$("#mainContainer #"+DataDiv).append("</div> </div>");

Thats it.

Solution

  • You can set the initial display property to none at initial point to hide the div and the when your data is loaded remove the hide css class by using jQuery removeClass() method like this:

    <html>
  <head>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  </head>
  <style>
   .hide{
     display:none;
   }
  </style>

  <div id="test" class="hide">

  <div>
  <script>
    $(document).ready(function(){
        //use your custom event and replace the name testEvent
        $("#test").on('testEvent',function(){
            $("#test").removeClass('hide');
        });
    });
  </script>

</html>

    and edit the question so that everyone understand your problem