Menu
I have a html page where on every page reload I want to show a background loader icon. I have used bootstrap spinner icon, but I can't add it to the center of the page.
<html>
<style>
.overlay {
background-color:#EFEFEF;
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 0px;
left: 0px;
opacity: .5;
filter: alpha(opacity=50);
display: none;
}
</style>
<body>
<div class="overlay">
<div class="d-flex justify-content-center">
<div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<!-- here goes the main content -->
<!-- here goes the main content -->
</body>
</html>
846
asked Oct 19 '25 03:10
You must to remove the display: none and adjust the top position like this :
.overlay {
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 40%;
left: 0px;
opacity: 0.5;
filter: alpha(opacity=50);
}<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="overlay">
<div class="d-flex justify-content-center">
<div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<!-- here goes the main content -->
</body>
</html>Add class "align-items-center" like this.
<div class="overlay d-flex justify-content-center align-items-center">
<div class="">
<div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With