How to Create a Skeleton Screen Loading In Pure CSS

SKELETON SCREEN CSS is a zero dependency and framework agnostic, a minimalistic set of hierarchical screen elements consisting of pure css. It includes scss source and compiled and non-minimized css files with browser vendor prefixes.

The skeleton screen is a visual placeholder that appears before the entire content of the page is displayed. It provides a low-resolution preview of the entire displayed page in order to give the impression that the loading time is faster.

The hierarchical skeleton screen consists of lightly colored shapes, lines, and text that define the structure of the page before the final content is loaded into place.

Read More: Simple and Fast Sidebar Navigation Skeleton on Bootstrap

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;

Included files:

  • index.scss – source code with default variables;
  • index.css – non-minified compiled css with browsers vendor prefixes;
  • index.min.css – minified compiled css with browsers vendor prefixes (default with importing via modules);

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 Usage, please go to the official website.

Share