Highly Customizable Skeleton Loader In Pure CSS – Skeleton Mammoth

Preview:

Description:

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:

12/08/2024

• Add support for the “borderRadius” property.