<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.
<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.
Share Improve this question asked Jul 6, 2015 at 4:51 Samadhi SankalaniSamadhi Sankalani 911 gold badge1 silver badge7 bronze badges 6- 1 Apply style to position:fixed – Sherin Mathew Commented Jul 6, 2015 at 4:54
- did you tried position fixed or sticky ? – Vinay Commented Jul 6, 2015 at 4:55
- Please put forth some effort to try and find the solution yourself and post your code here. – kittykittybangbang Commented Jul 6, 2015 at 4:55
- you should use position:fixed on the containing div, then you'll need to add some other styling to it to centre it on the screen – Jaromanda X Commented Jul 6, 2015 at 4:56
- I tried that too. I just figured out the problem. It happened due to some css which has defined top of the page. Here it is .PopupPanel { position: absolute; left: 50%; top: 50%; z-index: 100; height: 400px; margin-top: -200px; width: 600px; margin-left: -300px; } Now I have fixed that according to your comments. Thanks – Samadhi Sankalani Commented Jul 6, 2015 at 5:07
2 Answers
Reset to default 20I 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
}
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>