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

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

30 DAYS 30 PROJECT CHALLENGE

Day #10

Project Overview

The Skeleton Loader Shimmer Effect is a beginner-friendly project built using HTML, CSS & JavaScript. It creates placeholder elements that appear while actual content is loading. Instead of showing an empty screen, the application displays shapes that represent where images, titles, text, and other content will eventually appear. Also, the shimmer animation makes the skeleton elements load gradually and gives the website a more modern feel.

This project is useful for beginners who want to practice CSS animations, gradients, pseudo-elements, and responsive layouts. It also demonstrates how a simple loading interface can improve the overall user experience of a website.

Key Features

Content Placeholder Layout: Skeleton loader contains placeholders of the content type, which indicates the overall layout of the future data or information.
Shimmer Animation: A moving shimmer effect travels across the skeleton elements using CSS animations and gradients, creating the appearance of an active loading state.
Image Placeholder: The layout includes an image placeholder of a larger size indicating where an image, avatar, product photo, or another graphic asset is going to be placed.
Text Lines Placeholder: Multiple horizontal skeleton lines represent titles, descriptions, and other text content that would normally be displayed after loading.
CSS Gradient Effect: A linear gradient is used to create lighter and darker areas inside the loading elements, making the shimmer animation more visually noticeable.
Smooth Loading Animation: CSS @keyframes rule animates the shimmer animation, which is then used to create the smooth loading effect.
Skeleton Element Reusability: The same animation and styling can be used for different elements by adjusting their width, height, and other properties.
Clean and Modern Design: The project provides a modern loading interface that prevents users from seeing an empty or unfinished page while waiting for content.
Responsive Design: It can adjust to different screen sizes, making the loading placeholders suitable for desktops, tablets, and mobile devices.

What You'll Learn

Understand what skeleton loaders are used for in web applications.
Learn how placeholder elements can represent future content.
Practice creating layouts using HTML and CSS.
Understand how CSS gradients can create visual effects.
Learn how linear-gradient() works.
Practice using CSS @keyframes for animations.
Understand how the animation property controls repeated effects.
Learn how to create a shimmer effect using background movement.
Practice creating reusable CSS classes.
Understand how responsive styles can improve loading layouts.

HTML Code

HTML creates the structure of the Skeleton Loader. First, the style.css file is linked inside the <head> section so CSS can control the layout, placeholder appearance, and shimmer animation. The main content is placed inside a skeleton container that represents the area where the actual content will eventually appear. Inside this container, separate elements are used as placeholders for different types of content. A larger placeholder can represent an image or visual area, while smaller rectangular elements can represent headings and text lines. Each placeholder uses a common skeleton class so the same loading style and animation can be applied to multiple elements.

The structure can also include different classes for changing the width or size of individual placeholder lines. Finally, the HTML provides the basic layout, while CSS creates the visual loading effect and animation.

<!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

CSS creates the appearance and shimmer animation of the Skeleton Loader. The main container is styled with suitable width, padding, spacing, background, rounded corners, and layout properties to create a clean loading card. Skeleton elements receive a neutral background color and represent areas where actual content will appear. Different width and height values can be used to create image placeholders, headings, and text lines.

A linear-gradient() is used to create the lighter section of the shimmer effect. The gradient is moved across the placeholder using the background-position property and a CSS animation.

The @keyframes rule defines how the background moves from one position to another. The animation repeats continuously, creating a smooth shimmer effect. Responsive CSS rules can also adjust the size and layout of the skeleton elements for smaller screens.

* {
  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

JavaScript controls the loading state of the Skeleton Loader. First, it selects the skeleton and content elements using their IDs. The setTimeout() function simulates a loading delay of 3 seconds. After the delay, JavaScript hides the skeleton loader by setting its display to none and shows the actual content by changing its display to block.

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

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