Convert HTML Elements to Skeleton Loaders with SkeletonJS

Preview:

Description:

SkeletonJS is a lightweight JavaScript library that helps you create animated skeleton loaders using CSS custom properties and a built-in shimmer animation.

Instead of presenting users with blank spaces or generic spinners during loading states, SkeletonJS transforms your existing HTML elements into skeleton loaders that maintain your page layout and improve perceived loading performance.

How to use it:

1. Download the package and load the necessary JavaScript file in your HTML document:

<script src="/dist/skeleton.js"></script>

2. Add the skeletonJS class to an HTML element. You can use data attributes and inline CSS custom properties to control its behavior and appearance. This example creates ten clones of the div, each with a light gray background, a 4px border-radius, and a 1-second shimmer animation. The image is automatically replaced with a placeholder.

<div
  class="skeletonJS"
  data-skeletons-count="10"
  style="--skeleton-background-color: #e0e0e0;
         --skeleton-border-radius: 4px;
         --skeleton-animation-duration: 1s;
         --skeleton-animation-type: shimmer;
         --skeleton-animation-background: rgba(255,255,255,0.2);"
>
  <h2>Title</h2>
  <p>This is a paragraph that will be skeletonized.</p>
  <!-- The image will be replaced by a span, hiding its content -->
  <img
    src="1.jpg"
    alt="Placeholder image"
    style="width: 100%; height: 200px;"
  />
</div>

3. Initialize the skeleton loader with JavaScript:

SkeletonJS.init(document.querySelectorAll(".skeletonJS"));

4. For static loaders, you don’t need JavaScript initialization. Just add the skeletonJS class and define the necessary CSS:

<div
  class="skeletonJS"
  style="--skeleton-background-color: #e0e0e0; 
         --skeleton-border-radius: 4px;"
>
  <h2>Title</h2>
  <p>This is a paragraph that will be skeletonized.</p>
  <div style="width: 100px; height: 100px;"></div>
</div>

:root {
  --skeleton-background-color: #e0e0e0;
  --skeleton-animation-duration: 1.5s;
  --skeleton-animation-type: shimmer; // default animation
}
/* Base skeleton style. */
.skeletonJS {
  * {
    background-color: var(--skeleton-background-color);
    border-radius: var(--skeleton-border-radius, 0);
    position: relative;
    overflow: hidden;
    color: transparent !important;
  }
  /* Create the shimmer effect overlay */
  *::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--skeleton-animation-background, rgba(255, 255, 255, 0.2)), transparent);
    animation: var(--skeleton-animation-type) var(--skeleton-animation-duration) infinite;
  }
  /* For nested skeleton elements, hide inner content. */
  .skeletonJS * {
    visibility: hidden !important;
  }
}
/* Default shimmer animation keyframes */
@keyframes shimmer {
  0% {
    left: -150%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

5. Customize the skeleton loaders by passing an options object to SkeletonJS.init:

SkeletonJS.init(document.querySelectorAll(".skeletonJS"),{
  backgroundcolor: '#e0e0e0',
  borderRadius: '4px',
  animationDuration: '1s',
  animationType: 'shimmer',
  animationBackground: 'rgba(255,255,255,0.2)'
});

FAQs

Q: Does SkeletonJS affect SEO?
A: No. Skeleton screens are purely visual. Search engine crawlers will still see the actual content, even if it’s temporarily hidden by the skeleton loader.

Q: Can I customize the shimmer animation?
A: Yes. You can change the animationType and animationBackground options. For complete control, you can override the @keyframes shimmer CSS rule.

Q: What happen if my content is dynamically updated after the skeleton loader?
A: You’ll have to manage your content’s visibility. SkeletonJS does not provide built-in data management. It makes content color transparent. After loading your content, you must manage the visibility of your content to make it visible.