Welcome to this tutorial on Design a Custom Page Preloader using HTML CSS.

HTML Structure

<!-- The Preloader -->
<div class="preloader" id="preloader">
  <div class="loader-circle"></div>
  <div class="loader-text">Loading...</div>
</div>

<!-- Main Content -->
<div class="main-content" id="main-content">
  <h1>Welcome to the Website!</h1>
  <p>The page has fully loaded successfully.</p>
</div>

CSS Styling

body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; background-color: #f4f4f9; color: #333; }

/* Main content hidden initially */
.main-content {
  display: none;
  text-align: center;
  padding: 100px 20px;
}

/* Preloader full screen overlay */
.preloader {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.loader-circle {
  width: 80px;
  height: 80px;
  border: 8px solid #e2e8f0;
  border-top: 8px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.loader-text {
  font-size: 1.2rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 2px;
  animation: pulse 1.5s ease-in-out infinite;
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

JavaScript Logic

document.addEventListener('DOMContentLoaded', () => {
    const preloader = document.getElementById('preloader');
    const content = document.getElementById('main-content');
    
    // Simulate network loading time for demo
    setTimeout(() => {
        preloader.style.opacity = '0';
        setTimeout(() => {
            preloader.style.display = 'none';
            content.style.display = 'block';
        }, 500); // Wait for opacity transition to finish
    }, 2000); // 2 seconds simulated loading
});