Press "Enter" to skip to content

How to Create a Skeleton Screen Loading In Pure CSS

Skeleton Screen CSS – A complete set of elements for a hierarchical screen consisting of pure CSS. The source includes scss and compiled thumbnail and non-thumbnail CSS files with browser vendor prefixes.

Supported Skeleton Screens:

  • Circle
  • HeadLine
  • Line
  • Square Box
  • Divider
  • Card
  • Any mixture of the above screens.

How to make use of it:

1. Install the package with 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 web 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 fancy 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.

$skeleton-element-color: rgba(0, 0, 0, 0.17) !default;
$skeleton-loading-animation-time: 1.3s !default;

$skeleton-margin-standart: 16px !default;
$skeleton-margin-small: $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-line-margin-bottom: 8px !default;

$skeleton-headline-height: $skeleton-line-height * 2 !default;

$skeleton-square-height: 150px !default;

Animated Skeleton Loading Screens, How to Create Skeleton Loaders in CSS, Skeleton Loading Animation CSS


See Demo And Download

Official Website(nullilac): Click Here

This superior jQuery/javascript plugin is developed by nullilac. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *