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

Question

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.

What's with **the unnecessary** bold parts **in your** question? StackOverflow isn't a place where people write your code for you; it's a place where people help to debug code you've already written. — James Donnelly, Dec 09 '14 at 11:47
@JamesDonnelly I am new to this place. Thank you for correcting me. That wont be repeated. — Kartik Rao, Dec 09 '14 at 12:07
You need to learn the basics of Javascript, CSS and HTML. Look at the way you have written your ID and the comment. Also inline style? really? — Rahul Desai, Dec 09 '14 at 12:09
We are not here to write code for you, unless you show us your significant efforts. — Rahul Desai, Dec 09 '14 at 12:10
@RahulDesai Hello Sir, I know how to write comment. I would appreciate if you help me on my actual question. I have mentioned that I am new here, still a learner, so please ! — Kartik Rao, Dec 09 '14 at 12:13

score 0 · Accepted Answer · answered Dec 09 '14 at 12:11

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

This is helpful @Aminul , Can you please help with how to display a progress bar(Loading bar) till the time when CSS div is hidden ? — Kartik Rao, Dec 09 '14 at 12:24
here is an [example](http://jsfiddle.net/saikotju/NAs3V/210/) with jQuery and [jQuery UI](http://jqueryui.com/) Progress bar Customize it to solve your problem Thanks :) — Aminul, Dec 10 '14 at 04:51

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

1 Answers1