Animated Skeleton Loading Screens In Pure CSS

Preview:

Description:

A CSS skeleton loader library that creates an animated skeleton preview of your block content (e.g. text, cards, images) when the data is loading.

Supported Skeleton Screens:

• Circle (like avatar)
• HeadLine
• Line
• Square Box
• Divider (hr)
• Card
• Any combination of the above screens.

How to use it:

1. Install the package with NPM.

# NPM
$ npm i skeleton-screen-css –save

2. Import the skeleton-screen-css.

@import "skeleton-screen-css";
// or
<link rel="stylesheet" href="/path/to/dist/index.min.css" />

3. Add Skeleton Loading Screens to the page.

<!-- Circle -->
<div class="ssc-circle"></div>
<!-- Headline -->
<div class="ssc-head-line"></div>
<!-- Line -->
<div class="ssc-line"></div>
<!-- Divider -->
<div class="ssc-hr"></div>
<!-- Square Box -->
<div class="ssc-square"></div>
<!-- Card class -->
<div class="ssc-card"></div>
<!-- Card With Content -->
<div class="ssc-wrapper">Card with content</div>
<!-- Main parent class -->
<div class="ssc"></div>

4. Create a complex Skeleton Loading Screen.

<div class="ssc ssc-card" style="max-width: 1120px">
  <div class="ssc-wrapper">
    <div class="flex align-start">
      <div class="mr w-70">
        <div class="ssc-square mb" style="height: 200px"></div>
        <div class="ssc-square mb" style="height: 35px"></div>
        <div class="ssc-line"></div>
        <div class="ssc-line w-90"></div>
        <div class="ssc-line w-40"></div>
      </div>
      <div class="w-30">
        <div class="ssc-line mb w-60"></div>
        <div class="ssc-head-line mb"></div>
        <div class="ssc-line mb w-80"></div>
        <div class="ssc-line mb w-40"></div>
        <div class="ssc-line mb w-30"></div>
        <div class="ssc-line mb w-60"></div>
        <div class="ssc-line mb"></div>
        <div class="ssc-line mb w-70"></div>
        <div class="ssc-line mb w-40"></div>
        <div class="ssc-line mb w-30"></div>
      </div>
    </div>
  </div>
</div>

5. Override the default CSS variables to customize the Skeleton Loading Screen.

/* Variables */
$skeleton-element-color: rgba(0, 0, 0, 0.17) !default;
$skeleton-loading-animation-time: 1.3s !default;
$skeleton-margin-standart: 16px !default;
$skeleton-wrapper-padding: $skeleton-margin-standart !default;
$skeleton-margin-small: calc($skeleton-margin-standart / 2) !default;
$skeleton-card-box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.17) !default;
$skeleton-card-background-color: #ffffff !default;
$skeleton-card-border-radius: 5px !default;
$skeleton-circle-size: 50px !default;
$skeleton-hr-height: 2px !default;
$skeleton-line-border-radius: 15px !default;
$skeleton-line-height: 12px !default;
$skeleton-headline-height: calc($skeleton-line-height * 2) !default;
$skeleton-square-height: 150px !default;

Changelog:

v1.1.0 (09/20/2022)

• Remove line margin bottom – use mb, mbs or custom style rule instead;
• Remove ie11 from browserlist;
• Reduce bundle size;
• Add some flexbox helper classes;