Last updated on May 29th, 2025 at 12:13 pm

A splash screen is a common UI element that appears briefly before the main content of a web page loads. It’s often used to create a visual cue for users during page load or when launching an app-like experience on the web. In this tutorial, you’ll learn how to create a simple and effective splash screen using HTML, CSS, and jQuery.

Why Use a Splash Screen?

Splash screens can:

  • Improve user perception of loading time.
  • Add brand value or interactivity.
  • Prevent showing incomplete or unstyled content.

Let’s get started with building a basic version that you can enhance as per your project needs.

Live Demo

View Live Demo

Step 1: HTML Structure

Here’s a simple HTML layout with a splash screen div and main content.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>jQuery Splash Screen Example</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- Splash screen -->
  <div id="splash">
    <h1>Loading...</h1>
  </div>

  <!-- Main content -->
  <div id="content">
    <h2>Welcome to My Website</h2>
    <p>This is the main content of the site, visible after the splash screen disappears.</p>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Step 2: Styling the Splash Screen (CSS)

Use CSS to make the splash screen full-screen and centered.

/* style.css */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  visibility: hidden;
}

#splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#splash h1 {
  font-size: 2rem;
  color: #333;
}

Step 3: jQuery Logic to Hide Splash Screen

Use jQuery to fade out the splash screen after a short delay and then show the main content.

// script.js
$(document).ready(function () {
  setTimeout(function () {
    $('#splash').fadeOut(600, function () {
      $('body').css('visibility', 'visible');
    });
  }, 2000); // Splash duration: 2 seconds
});

Optional: Add a Spinner or Animation

If you want to add a loading spinner instead of plain text, you can update the splash screen like this:

<div id="splash">
  <div class="spinner"></div>
</div>
.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #ccc;
  border-top: 6px solid #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

SEO Tips for Using a Splash Screen

  1. Don’t block important content for search engine bots.
  2. Keep splash duration short to improve user experience.
  3. Ensure the splash screen is accessible (e.g., with aria-hidden="true" if needed).
  4. If using a logo or brand image, always include alt text for accessibility and SEO.

Project Repository

Download Code on GitHub

Contents:

  • index.html – Main page with splash logic
  • style.css – Styling for splash and content
  • script.js – jQuery functionality

Conclusion

A splash screen adds a touch of interactivity and branding to your website. With just a bit of jQuery and CSS, you can implement a lightweight solution that’s both functional and user-friendly.

Try experimenting with animations, custom loaders, or even fading in background images for a more dynamic experience.

Related Tutorials