How to Implement a Loading Animation With JavaScript

Elements Custom Components
1

For one of my sites, I made a custom component with a loading animation.

I was wondering how to Implement the Animation so it shows up when the page is loading and disappears when the page is loaded.

2

I asked ChatGPT… I have copied the results below, it’s not tested and I have no idea if it works, but the generally idea is to show the loader over the entire page, then hide the loader using Javascript once the page has loaded.

I’m not sure how you have things setup, but hopefully this points you in the right direction. Let me know if you have any more questions :smiling_face:

If you want to show a loading animation while your page is loading and hide it once everything has fully loaded, here’s a simple solution using HTML, CSS, and JavaScript.

Add this snippet to your page’s HTML:

<!-- Loading animation -->
<div class="loading-overlay" id="loadingOverlay">
  <div class="spinner"></div>
</div>

<!-- Main content -->
<div class="content">
  <h1>Welcome to My Website</h1>
  <p>Your content goes here...</p>
</div>

Add this CSS to style the loading overlay and spinner:

/* Full-screen overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

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

/* Keyframes for spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hide content initially */
.content {
  display: none;
}

Add this script to handle hiding the animation when the page is fully loaded:

document.addEventListener("DOMContentLoaded", () => {
  window.addEventListener("load", () => {
    const loadingOverlay = document.getElementById("loadingOverlay");
    const content = document.querySelector(".content");

    // Fade out the loading overlay
    loadingOverlay.style.opacity = "0";
    loadingOverlay.style.transition = "opacity 0.5s ease";

    // Show the content after the overlay fades out
    setTimeout(() => {
      loadingOverlay.style.display = "none";
      content.style.display = "block";
    }, 500); // Match the transition duration
  });
});

How It Works:

  1. HTML: A full-screen loading-overlay with a spinner covers the page until loading is complete.

  2. CSS: The spinner has a smooth rotating animation, and the overlay ensures the content is hidden until ready.

  3. JavaScript: When the window finishes loading, the overlay fades out, and the content is revealed.

This provides a smooth and user-friendly experience for your visitors!

3

Seems not be so easy. Asked this at chat GTP, Cursor, Windsurf. They gave me al different solutions but they al gave different errors.

This is the component I’m working on.

4

@Bartje Okay, so I had a “quick” play around and got the basics working :partying_face:

I set a div wrapper for the spinner to cover the entire screen. I asked Chat GPT to use Alpine JS to hide the spinner when the page is loaded (as we have that JavaScript framework in Elements). At the moment it’s set to three seconds for testing; however, you just need to comment out the top line and uncomment the other line (I hope that makes sense).

Here’s the updated spinner project file for you to use.

I know we make Elements (and I’m biased), but I love playing around with this stuff. It’s so much fun. :smiling_face:

5

:pray: :pray: :pray:

Good to know that Alpine JS is supported.

1 Like