As a newcomer to programming, I wanted to implement a loader that displays a centered loading animation when the page loads or refreshes. The animation should gray out and fade the entire page until it fully loads.
I've managed to get everything else working except for centering the animation and implementing the fading/graying effect. Despite extensive searching, I couldn't find a solution that aligns with what I envisioned.
Here's the HTML snippet:
<!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">
... (rest of HTML code)
And here's the JavaScript part:
window.addEventListener("load", function()
{
var loader = document.getElementById("ld");
loader.style.display = "none";
})
I have only styled the loader itself in CSS so far, focusing on coloring rather than positioning. I attempted to center the loader by putting it in a container, but this approach didn't produce the desired outcome and also caused issues with the navbar graying out.
Thank you all for your help!