How do I install a loader?

[edrol97]

I've got a loading gif that I want to install on my website. This is the code I have so far. I tried adding in a url of the file to the tag #loader in the css and it didn't work. How do I do it?

<span id="loader">Loading...</span>
<script>
      window.onload = () => document.querySelector("#loader").remove();
    </script>

 

[VBService]

Have you tried something like this?

<div id="loader">Loading...</div>
<div id="content" style="display: none;">Content loaded!</div>

<script>
  // Call the function simulating loading after the page is loaded
  window.onload = simulateLoading;

  // Function simulating file loading (delay)
  function simulateLoading() {
    const loader = document.querySelector('#loader');
    const content = document.querySelector('#content');

    // Simulate loading for 3 seconds
    setTimeout(() => {
      loader.style.display = 'none'; // loader.remove();
      content.style.display = 'block';
    }, 3000); // 3 seconds
  }
</script>

or

<style>
  #loader {
    display: flex;
    gap: .5rem;
  }
  #loader img {
    width: 20px;
  }
</style>

<div id="loader">
  <span>Loading</span>
  <span>
    <img src="https://icons8.com/preloaders/preloaders/1497/Spinning%20arrows.gif">
  </span>
</div>
<div id="content" style="display: none;">Content loaded!</div>

<script>
  window.onload = simulateLoading;

  function simulateLoading() {
    const loader = document.querySelector('#loader');
    const content = document.querySelector('#content');

    setTimeout(() => {
      loader.style.display = 'none'; // loader.remove();
      content.style.display = 'block';
    }, 5000);
  }
</script>

or

<style>
  #loader {
    display: flex;
    gap: .5rem;
  }
  #loader img {
    width: 20px;
  }
  #content {
    opacity: 0;
    transition: opacity 1s;
  }
  .show {
    opacity: 1 !important;
  }
</style>

<div id="loader">
  <span>Loading</span>
  <span>
    <img src="https://icons8.com/preloaders/preloaders/1497/Spinning%20arrows.gif">
  </span>
</div>
<div id="content"></div>

<script>
  window.onload = simulateLoading;

  async function simulateLoading() {
    const loader = document.querySelector('#loader');
    const content = document.querySelector('#content');

    const response = await fetch('https://slowfil.es/file?payload=dom&delay=7000');
    const data = await response.text();

    if (data)
      content.textContent = data + ' * Lorem ipsum.'.repeat(200);

      loader.style.display = 'none'; // loader.remove();
      content.classList.add('show');
    }
</script>

or

<style>
  #loader {
    display: flex;
    gap: .5rem;
  }
  #loader img {
    width: 20px;
  }
  #content {
    opacity: 0;
    transition: opacity 1s;
  }
  .show {
    opacity: 1 !important;
  }
  .error {
    color: red;
  }
</style>

<div id="loader">
  <span>Loading</span>
  <span>
    <img src="https://icons8.com/preloaders/preloaders/1497/Spinning%20arrows.gif">
  </span>
</div>
<div id="content"></div>

<script>
  window.onload = simulateLoading;

  async function simulateLoading() {
    const loader = document.querySelector('#loader');
    const content = document.querySelector('#content');

    // Simulation of error, file not found (status=404)
    const response = await fetch('https://slowfil.es/file?payload=dom&delay=7000&status=404');
    //const response = await fetch('https://slowfil.es/file?payload=dom&delay=7000'); // Default status 200

    if (response.ok) {
      const data = await response.text();
      if (data)
        content.textContent = data + ' * Lorem ipsum.'.repeat(200);
    } else {
      content.textContent = `HTTP error! Status: ${response.status} file not found!`;
      content.classList.add('error');
    }

    loader.style.display = 'none'; // loader.remove();
    content.classList.add('show');
  }
</script>