Fade-in loader with centered placement on the full page

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!

Answer №1

Exploring the process of creating an overlay and positioning your loading widget in the center of the screen can be achieved through various methods. Here, we present one approach:

function hideOverlay() {
  const overlay = document.querySelector('#overlay');
  overlay.classList.remove('show');
  document.body.style.overflow = 'auto';
 }
body {
overflow: hidden;
}

#overlay {
  background-color: rgba(255,255,255,0.7);
  display: none;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

#overlay.show {
  display: block;
}

#overlay-container {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: 100%;
}
<article>
    <header><h2>My Article</h2></header>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut...
    </p>
    </article>
    
    <div id="overlay" class="show">
      <div id="overlay-container">
       <h3>Loading ...</h3>
       <p>Insert your loading widget within the overlay-container</p>
       <button onclick="hideOverlay()">Hide Overlay</button>
      </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Developing a music playlist using javascript/angular (replicating array elements while linking nested objects)

I am currently working on creating a playlist for a music player within an Angular app that includes a shuffle feature. The actual shuffle function is not the issue, as I am utilizing the Fisher Yates Shuffle method and it is functioning correctly. When th ...

The side navigation panel transition is stuck and failing to slide out as intended

My element is able to slide in smoothly, but encounters trouble when attempting to slide back out. I suspect the issue lies within the syntax for "display: none". Any assistance or recommendations would be greatly appreciated, and feel free to request more ...

Attach a tab-icon to a picture

I am looking to add a tab to the bottom border of an image within a gallery. This tab needs to be right up against the image border with no space in between. When clicked, this tab should activate a small JavaScript function that will display the content ...

What is the reason for sending a single file to the server?

A function called "import File" was developed to send multiple files to the server, but only one file is being received. Input: <input type="files" id="files" name="files" multiple onChange={ (e) => this.importFile(e.target.files) } ...

New to using JavaScript and JQuery, attempting to position a form underneath an image at a specific URL for the

Hello, I'm having difficulties placing a form below an image with a specific URL. As someone who is still learning JQuery, I am unsure of what mistake I might be making. Is there anyone who can help me figure out what's wrong here? <html> ...

Sharing data between AngularJS and D3 with JSON - a guide

When working on my application controller, I typically send a request to my API. This is what it usually looks like: .state('state1', { url: '/datas/:id', templateUrl: 'myurl.com', title: 'title', ...

SmoothDivScroll jQuery Plugin may encounter issues when JavaScript files are loaded asynchronously

I recently encountered an issue with SmoothDivScroll when I attempted to load all the JS files asynchronously. I implemented my own async loading pattern using Lazyload.js by Ryan Grove. I also experimented with Modernizr's load/complete pattern, but ...

The PHP file I'm trying to access isn't receiving the GET request from my PHP script

Basically, I want a button on one php page to trigger the printing of a new php page. This feature is working perfectly. The only issue is that I am trying to ensure the user ID gets passed over to the second page and displayed there. Strangely, it seems t ...

Ensuring the clickable area of the button aligns perfectly with the button itself and adjusting the arrow position to be

Check out the sandbox here: https://codesandbox.io/s/vigilant-currying-h7c3r?file=/styles.css If you are looking for the classes .line and .arrow, they are what you need. When you create an event, notice how the arrows appear too low, with the clickable a ...

During server and browser builds, NextJs encounters a 404 error when trying to access files named _ssgManifest.js and _buildManifest.js. Additionally, the file named _

I recently deployed a NextJs application on a digitalocean droplet running Ubuntu 22.04. "next": "12.2.3", "react": "18.2.0", Encountering a 404 error for the following files: _ssgManifest.js, _buildManifest.js, an ...

Oops: Looks like there is already a request for 'PUBLIC_requestAccounts' pending from http://localhost:3000. Just hold tight for now

There comes a moment when an unexpected error arises and fails to establish a connection with your wallet. if (window.ethereum) { console.log("11") const connect = async () => { const account = await window.ethereum.request({ ...

HtmlWebpackPlugin can cause issues with loading relative path files on websites that are not located in the root directory

I have set up webpack and the HtmlWebpackPlugin to automatically include bundled js and css files in an html template. new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' ...

Transfer the AWS configuration settings to the imported module

Currently, I am attempting to perform unit testing on a JS AWS Lambda by running it locally. To simulate the Lambda environment, I am taking on the same role that the Lambda would have with AWS.config.credentials and then executing the Lambda function that ...

Tips for maintaining tab state using Angular Material

In my Angular 8 application with Angular Material, I have implemented four tabs where each tab allows editing. However, when going back from the edit mode to the tabs, I want the last selected tab to remain selected. My approach so far is as follows: exp ...

Masonry.js is working perfectly in Firefox, however, it is experiencing compatibility issues with Chrome and

Recently, I encountered a strange issue with Dessandro's Masonry.js library. It was working perfectly fine until it suddenly stopped functioning in Safari and Chrome (I haven't tested it on IE yet), while still working flawlessly in Firefox. Usua ...

Combining selected boxes through merging

Looking to create a simple webpage with the following requirements: There should be 10 rows and 3 boxes in each row. If I select 2 or more boxes or drag a box, they should merge together. For example, if my initial screen looks like this: and then I se ...

Attempting to apply custom styles to jQuery components using CSS

Looking to restyle the black bar on my test page located at The black bar with 3 tabs about halfway down the page needs a new color scheme. By inspecting with FireBug, I found these elements: <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ...

Strategies for resolving the error "Cast to ObjectId failed for value"

<form action="" method="post"> <input type="password" name="password" placeholder="Type Your Password Here" required> <input type="hidden" name="user_id" value=&q ...

Symfony/encore requires devDependencies in order to successfully compile

My experience with Symfony5 and encore has been smooth until I attempted to deploy to production. In order to install dependencies, you can use the command npm install --production. To compile, run npm run build --prod. I encountered an issue when trying ...

Unable to halt operation when xmlhttprequest.responseText is equal to a particular value

Currently, I am incorporating XmlHttp with Java servlets in the following manner: function btnSave_onclick(){ var xmlHttp; var responseText; if (condition){ var para= "someParamsHere"; var url = "urlHere"; if (window.XMLHttpRequest) { ...