Highly Customizable Skeleton Loader In Pure CSS – Skeleton Mammoth

Category: CSS & CSS3 , Loading , Recommended | November 22, 2023
Author:WOLFRIEND
Views Total:241 views
Official Page:Go to website
Last Update:November 22, 2023
License:MIT

Preview:

Highly Customizable Skeleton Loader In Pure CSS – Skeleton Mammoth

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>

You Might Be Interested In:


Leave a Reply