LoadingPanel - Waiting for Vector & WFS loading

Question

I have vector layer with WFS protocol. and because I have a huge amount of data, there is a while before features loaded on the map.

So i need to tell user to wait a moment until they load by display a "waiting" animation.

I found this Waiting for Vector & WFS loading

and tried it with no luck so far.

here is what I did:

• I placed the LoadingPanel.js

• I added this stylesheet:

  <style type="text/css">
  
  .olControlLoadingPanel {
  
          background-image:url(loading.gif);
  
          position: relative;
  
          width: 195px;
  
          height: 11px;
  
          background-position:center;
  
          background-repeat:no-repeat;
  
          display: none;
  
      }
  
   </style>`
  

• and finally added the LoadingPanel control :

  map.addControl(new OpenLayers.Control.LoadingPanel());

Answer 1

could be your z-index? This works for me here

.olControlLoadingPanel {
background-image: url(../OpenLayers/theme/default/img/load.gif);
left:45%;
top: 45%;
position: absolute;
width: 250px;
height:250px;
background-position: center;
background-repeat: no-repeat;
display: none;
z-index: 1000;

}