Highly Customizable Skeleton Loader In Pure CSS – Skeleton Mammoth

Skeleton Mammoth is a CSS library for creating customizable skeleton loaders to provide a visual placeholder while the content loads.

You can use the library to simulate text blocks, images, inputs, buttons, cards, and more on your page. Ideal for listing pages, profiles, dashboard views, e-commerce products, search results, etc.

How to use it:

1. Download and import the Skeleton Mammoth’s stylesheet in the document.

<link rel="stylesheet" href="dist/skeleton-mammoth.min.css" />

2. The required HTML structure for the skeleton loader.

<div class="m-loading">
  <div class="sm-item-primary">
    Primary Content Goes Here
  </div>
  <p class="sm-item-secondary">
    Secondary Content Goes Here
  </p>
  <p class="sm-item-secondary">
    More Secondary Content
  </p>
</div>

3. That’s it. To reveal the content, just remove the CSS class ‘m-loading’ from the top container using JavaScript or whatever you like.

4. Customize the skeleton by passing the options to the data-sm-config attribute. All possible options:

• Theme: “Dark” or “Light”
• Animation: “none”, “wave”, “wave-reverse”, or “pulse”
• Opacity: from 0 to 1

<div class="m-loading" data-sm-config='"theme":"dark","animation":"wave","opacity":"0.8"'>
  <div class="sm-item-primary">
    Primary Content Goes Here
  </div>
  <p class="sm-item-secondary">
    Secondary Content Goes Here
  </p>
  <p class="sm-item-secondary">
    More Secondary Content
  </p>
</div>

Changelog:

v4.0.0 (10/16/2026)

• Text lines: the sm-item-lines-N classes (N is from 1 to 10) draw the skeleton of a text as N lines, even if the element is still empty. The sm-item-lines class takes the number of the lines from the text. The –sm-lines and –sm-lines-gap variables.
• reveal: “fade”: the content appears smoothly when the loading is finished (the –sm-reveal-duration and –sm-reveal-timing-function variables).
• theme: “inherit”: the skeleton takes the color-scheme of your page.
• borderRadius: “full”: a circle or a pill.
• High contrast mode (forced-colors): the skeleton is visible and the hidden text stays hidden (the –sm-color-forced and –sm-color-forced-animation variables).
• Minimum browser versions are raised
• borderRadius is now a fallback

10/13/2026

• v3.1.0

12/08/2024

• Add support for the “borderRadius” property.