Simple and Flexible, Content Placeholder Loading Animation

Placeholder loading is simple and flexible, css only, animation for downloading OR loading content. This is a pure CSS solution to create an animated and customizable skeleton upload effect like you saw on Facebook.

skeleton screen generator, skeleton loading, skeleton loading css codepen, table skeleton loading, bootstrap loading placeholder, shimmer loading css

How to make use of it:

Install and import the Placeholder Loading.

# NPM
$ npm install placeholder-loading --save

Or load the stylesheet from a CDN.

<link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">

The instance HTML to create a skeleton loader.

<div class="ph-item">
  <div class="ph-col-12">
    <div class="ph-picture"></div>
    <div class="ph-row">
      <div class="ph-col-4"></div>
      <div class="ph-col-8 empty"></div>
      <div class="ph-col-12"></div>
    </div>
  </div>
  <div class="ph-col-2">
    <div class="ph-avatar"></div>
  </div>
  <div>
    <div class="ph-row">
      <div class="ph-col-12"></div>
      <div class="ph-col-2"></div>
      <div class="ph-col-10 empty"></div>
      <div class="ph-col-8 big"></div>
      <div class="ph-col-4 big empty"></div>
    </div>
  </div>
</div>

Customize the Skeleton Loader by overring the default CSS variables within the _variables.scss.

$ph-bg:                   #fff !default;
$ph-color:                #ced4da !default;
$ph-border-radius:        2px !default;
$ph-gutter:               30px !default;
$ph-spacer:               15px !default;
$ph-avatar-border-radius: 50% !default;
$ph-animation-duration: .8s !default;

Facebook Inspired Skeleton Loader, Placeholder loading Plugin/Github, skeleton loader javascript, react placeholder loading