How to create a JavaScript loading screen while a page loads?

General Discussions
, ,
1

I want to display a loading animation while my HTML page loads and remove it once the content is fully loaded. I’ve implemented a CSS-based spinner, but I need a proper java script loading method to ensure the loading screen disappears when the page is ready. How can I achieve this without relying on Ajax?

2

Hey Punam :wave:,

Here’s the proper JavaScript code that’ll help you load your script and display the image seamlessly.

This approach ensures the loading screen disappears only after the entire page (including all images) is fully loaded.

:white_check_mark: What It Does:

  • Shows a simple loading screen while the page loads
  • Uses window.onload to fade it out only when everything (scripts, images, etc.) has finished loading

:pushpin: Steps:

  1. Add a CSS-based loading screen
  2. Use window.onload to remove it after full load
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Screen Example</title>
  <style>
    /* Loading screen style */
    #loading {
      position: fixed;
      width: 100%;
      height: 100%;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      transition: opacity 0.5s ease-out;
    }
  </style>
</head>
<body>

  <div id="loading">Loading...</div>

  <script>
    window.onload = function() {
      const loader = document.getElementById("loading");
      loader.style.opacity = "0";
      setTimeout(() => loader.style.display = "none", 500);
    };
  </script>

  <h1>Page Content</h1>
  <img src="large-image.jpg" alt="Example" width="600">

</body>
</html>

Let me know if you need help styling the loader or customizing the animation :art:

Happy coding! :computer::sparkles:

3

Hey @Punamhans :wave:,

Glad you found the initial window.onload example shared by @charity-majors helpful!

That approach has worked well for me, especially when you want to make sure everything (including large images or scripts) is fully loaded before removing the loader.

The smooth fade-out gives it a nice touch too :sparkles:

That said, I really liked the additional suggestion someone shared using DOMContentLoaded, it’s a smart alternative when you’re working with lighter pages where waiting for full page load feels unnecessary.

Here’s that version again:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("loading").style.display = "none";
  });
</script>

This method is great if you’re aiming for speed and your page doesn’t rely heavily on images or assets. It makes the loading screen disappear as soon as the HTML is parsed, which can make the page feel more responsive.

So overall, both methods are great, it really just depends on the use case:

  • Go with window.onload for full control and smooth transitions on content-heavy pages.
  • Use DOMContentLoaded for snappier performance on lightweight pages.

Let me know which one you end up using or if you want to add a little animation magic to either! :blush:

4

Hey @Punamhans :wave:,

Building on the earlier points shared by @charity-majors @dimplesaini.230

  • Using window.onload worked great for me when I needed to wait for all images and scripts to load before hiding the loader. It gave the page a smooth fade-out that felt more polished, especially for media-heavy content.
  • I also liked the idea of using DOMContentLoaded for snappier performance on lighter pages. It’s perfect if you’re not relying heavily on external assets and want the content to show up faster.

Now, if you’re looking to make things a little more visually engaging, there’s also the option of adding an animated spinner using CSS. It’s a nice touch if you want something more dynamic than just plain text.

Here’s how that version looks:

<div id="loading">
  <div class="spinner"></div>
</div>

<style>
  #loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

<script>
  window.addEventListener("load", function() {
    document.getElementById("loading").style.display = "none";
  });
</script>

:white_check_mark: Why I liked this:

  • The spinner gives the loading screen a modern, polished feel.
  • It works across all browsers with just vanilla CSS + JS, no extra libraries
  • You still get the benefit of window.onload to ensure full load before hiding it

:bulb: What worked best for me? I ended up combining the window.onload method with the spinner UI, so users had a clear visual cue while things loaded, and the loader disappeared at just the right time.

It looked clean, worked smoothly, and kept everything user-friendly.

Let me know which one you go with, or if you’d like help tweaking the animation colors or styles! :blush: