so i’m relatively new to programing,and i wanted to create a loader that whenever the page loads or refreshes it shows a centered loading animation that greys out and fades the entire page then all goes back to normal when the page fully loads.
i managed to get everything else working except centering the animation and fading/greying the page. idk if i’m missing something really obvious but i’ve searched everywhere and i didn’t quite get what i wanted.
here’s the html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>S&B Clothes</title>
<link rel="icon" type="image/x-icon" href="logo/icons8-needle-96.png">
</head>
<body id="body">
<!--Navbar-->
<nav class="navbar navbar-expand-sm sticky-top" id="navbar1">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="logo/logo_svg.svg" class="rounded" id="navbar_logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#men_women">
<div class="container_menu" onclick="menu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="men_women">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<button type="button" class="btn" onclick="women_index_fn()" id="navbar_men">Women</button>
</li>
<li>
<vr class="vr"></vr>
</li>
<li class="nav-item">
<button type="button" class="btn" onclick="children_index_fn()" id="navbar_women">Children</button>
</li>
</li>
<li>
<vr class="vr"></vr>
</li>
<li class="nav-item">
<button type="button" class="btn" onclick="men_index_fn()" id="navbar_children">Men</button>
</li>
</ul>
</div>
<div class="input-group rounded">
<input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
<button type="button" class="btn rounded" id="src_btn">Search</button>
</div>
<div>
<button class="btn" id="user_btn" onmouseover="change_img_user()" onmouseout="change_img_user_2()">
<img src="Icons/user-white.png" id="user_btn_ico"/>
</button>
</div>
<div>
<button class="btn" id="favorite_btn" onmouseover="change_img_fav()" onmouseout="change_img_fav_2()">
<img src="Icons/favorite-white.png" id="favorite_btn_ico"/>
</button>
</div>
<div>
<button class="btn" id="shop_cart_btn" onmouseover="change_img_cart()" onmouseout="change_img_cart_2()">
<img src="Icons/shopping-cart-white.png" id="shop_cart_ico"/>
</button>
</div>
</div>
</nav>
<!--Loader-->
<div class="preloader" id="ld">
<div class="box">
<div class="box__inner">
<div class="box__back-flap"></div>
<div class="box__right-flap"></div>
<div class="box__front-flap"></div>
<div class="box__left-flap"></div>
<div class="box__front"></div>
</div>
</div>
<div class="box">
<div class="box__inner">
<div class="box__back-flap"></div>
<div class="box__right-flap"></div>
<div class="box__front-flap"></div>
<div class="box__left-flap"></div>
<div class="box__front"></div>
</div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
here’s the js
window.addEventListener("load", function()
{
var loader = document.getElementById("ld");
loader.style.display = "none";
})
all the css i’ve done so far is just loader style and coloring nothing really related to positioning.
i tried putting my loader in a container and centering that but it didn’t work out as planned and the navbar didn’t get greyed out
thank you all