Loaders

Loading indicator with dependency on received data

https://jsonplaceholder.typicode.com/ used for this example

Real fetching data

In this example, real data is being fetched, but due to the absence of a Content-Length header in the resource https://jsonplaceholder.typicode.com/, a different example with emulated progress for the progress bar is used below.

document.addEventListener("DOMContentLoaded", function () {
  const progressBar = document.getElementById("progress-bar");
  const progressText = document.getElementById("progress-text");
  const progressContainer = document.querySelector(".progress-container");
  let timeoutId;

  function updateProgress(event) {
    if (event.lengthComputable) {
      const percentComplete = Math.round((event.loaded / event.total) * 100);
      progressBar.style.width = percentComplete + "%";
      progressText.textContent = percentComplete + "%";
    }
  }

  function fetchData() {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://jsonplaceholder.typicode.com/photos", true);
    xhr.responseType = "json";

    xhr.onprogress = updateProgress;

    xhr.onload = function () {
      if (xhr.status === 200) {
        progressText.textContent = "Load Complete";
        timeoutId = setTimeout(() => {
          progressContainer.style.opacity = "0";
          setTimeout(() => {
            progressContainer.style.display = "none";
          }, 500);
        }, 1000);
      }
    };

    xhr.onerror = function () {
      progressText.textContent = "Error loading data";
    };

    xhr.send();
  }

  fetchData();
});

Emulation

document.addEventListener("DOMContentLoaded", function () {
  const progressBar = document.getElementById("progress-bar");
  const progressText = document.getElementById("progress-text");
  const progressContainer = document.querySelector(".progress-container");
  let progress = 0;

  function simulateProgress() {
    if (progress < 100) {
      progress += 1;
      progressBar.style.width = progress + "%";
      progressText.textContent = progress + "%";
      setTimeout(simulateProgress, 50); // Delay of 50 milliseconds for visual demonstration
    } else {
      progressText.textContent = "Load Complete";
      setTimeout(() => {
        progressContainer.style.opacity = "0"; // Smoothly hide the progress bar
        setTimeout(() => {
          progressContainer.style.display = "none"; // Remove the element from the DOM
        }, 500); // Delay before removal to complete the animation
      }, 1000);
    }
  }

  simulateProgress();
});

HTML LoadersCSS LoadersTS Loaders