ct4.us

Here’s a tiny, copy-paste loading screen with a simple CSS circle. It shows a full-page overlay while the page loads, then fades out.

Paste this code to CSS Tab:

/* Full-page loader overlay */
  .loader {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: #fff;           /* change to match your site */
    z-index: 9999;
    transition: opacity .3s ease;
  }
  .loader.is-hidden { opacity: 0; pointer-events: none; }

  /* The circle spinner */
  .spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top-color: #3b82f6;  /* change color if you want */
    border-right-color: #3b82f6;
    animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; border-color: #3b82f6; }
  }

  /* Demo page content just to show layout */
  body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; }
  .content { padding: 2rem; max-width: 60ch; margin: 4rem auto; }

This to HTML:

  <!-- Loader overlay -->
  <div id="loader" class="loader" aria-live="polite" aria-busy="true">
    <div class="spinner" role="progressbar" aria-label="Loading"></div>
  </div>

  <!-- Your page content -->
  <main class="content">


    <p>This content appears once the loader fades out.</p>



  </main>

And the code to JavaScript Tab:

// Hide the loader when everything is done loading
  window.addEventListener('load', function () {
    const loader = document.getElementById('loader');
    loader.classList.add('is-hidden');
    // Optionally remove it from the DOM after the fade
    setTimeout(() => loader.remove(), 300);
  });

  // If you want to control it manually:
  // showLoader(); hideLoader();
  function showLoader() {
    let loader = document.getElementById('loader');
    if (!loader) {
      loader = document.createElement('div');
      loader.id = 'loader';
      loader.className = 'loader';
      loader.innerHTML = '<div class="spinner" role="progressbar" aria-label="Loading"></div>';
      document.body.appendChild(loader);
    } else {
      loader.classList.remove('is-hidden');
    }
  }
  function hideLoader() {
    const loader = document.getElementById('loader');
    if (loader) {
      loader.classList.add('is-hidden');
      setTimeout(() => loader.remove(), 300);
    }
  }