CODEWITHSUNDEEP
javascriptjqueryhtmlcssasp.net-mvc
Samadhi Sankalani
Samadhi Sankalani

Reputation: 91

loading Spinner - always keep in the middle of the screen even while 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>

It is the code for showing a loading graphic while page is getting loading. It shows above a grid view. When the grid consist of large number of rows, when I scroll down the page, I can't see the loading graphic . But when I go to the top of the screen I can see the loading graphic. How I keep it always in the middle of the screen even while scrolling the page?

Please help me.

Upvotes: 7

Views: 11006

Answers (2)

LawMan
LawMan

Reputation: 3625

Here's my solution...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
  <style>    
    body {
      height: 100%;
      position: relative;
    }

    .k-loading-image{
      position: fixed;
    }
    
    .longDiv {
      height:1500px;
      background: red;
    }
  </style>

  <div class="longDiv">This is a long DIV...</div>
  
  <script>
    const showBusyIndicator = (show) => kendo.ui.progress($("body"), show);
    $(document).ready(showBusyIndicator(true));
  </script>
</body>
  
</html>

Upvotes: 0

Nerdkowski
Nerdkowski

Reputation: 475

I went through my old answers to see if I could add something that is more modern. In my newer solution you do not need to specify the height or the width. Its a more generic solution.

.center {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Try this:

.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
}

Upvotes: 20

Related Questions