Skeleton Loader (Shimmer Effect) | HTML, CSS & JavaScript

Skeleton Loader (Shimmer Effect) with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #10

Project Overview

A Skeleton Loader with Shimmer Effect built using HTML, CSS, and JavaScript that improves user experience during data loading.
Instead of showing blank screens or spinners, the project displays animated placeholder elements that closely resemble the final content layout until the actual data is loaded.

Key Features

Animated shimmer effect to indicate loading state.
Skeleton placeholders that mimic real content structure.
Smooth transition from loading state to actual content.
Enhances perceived performance and user experience.
Clean, reusable, and responsive design.
Easy to integrate with APIs or dynamic data sources.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Skeleton Loader</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="container">
    
    <!-- Skeleton -->
    <div class="card skeleton" id="skeleton">
      <div class="skeleton-img shimmer"></div>
      <div class="skeleton-text shimmer"></div>
      <div class="skeleton-text short shimmer"></div>
    </div>

    <!-- Actual Content -->
    <div class="card content" id="content">
      <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=600" alt="Content Image">

      <h3>Loaded Content</h3>
      <p>This content appears after loading is complete.</p>
    </div>

  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #042453;
}

.container {
  width: 320px;
}

.card {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Skeleton styles */
.skeleton-img {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  background: #e5e7eb;
  margin-bottom: 15px;
}

.skeleton-text {
  height: 16px;
  background: #e5e7eb;
  border-radius: 4px;
  margin-bottom: 10px;
}

.skeleton-text.short {
  width: 60%;
}

/* Shimmer animation */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150px;
  height: 100%;
  width: 150px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}

/* Hide actual content initially */
.content {
  display: none;
}

img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

Javascript Code

const skeleton = document.getElementById("skeleton");
const content = document.getElementById("content");

// Simulate loading
setTimeout(() => {
  skeleton.style.display = "none";
  content.style.display = "block";
}, 3000);