Clever Geek Handbook

Loading Spinner - always keep in the middle of the screen even when scrolling the page

<div id="Dvloading" style="float: left;">
        <i id="loadingSpinner" class="icon-spinner icon-spin blue" style="margin-left: 50%; position:absolute ; margin-top: 25%; z-index: 1000; font-size: 800%;"></i>
</div>

This is the code to show a graphical loading image when the page is loaded. It shows the above grid view. When the grid has a lot of rows, when I scroll down the page I don't see the loading graphics. But when I go to the top of the screen, I see the loading graphics. How do I keep it always in the middle of the screen even when scrolling the page?

Please help me.

+3


source to share


1 answer


Try the following:



.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px; //Half of the height of the loading graphic
  margin-left: -50px; //Half of the width of the loading graphic
}
+8


source






More articles:


All Articles