Facebook Inspired Skeleton Loader In Pure CSS – Placeholder Loading

Category: CSS & CSS3 , Loading , Recommended | June 25, 2019
Author: zalog
Views Total: 64
Official Page: Go to website
Last Update: June 25, 2019
License: MIT

Preview:

Facebook Inspired Skeleton Loader In Pure CSS – Placeholder Loading

Description:

This is the pure CSS solution to create simple, animated, customizable skeleton loading effect as you’ve seen on Facebook.

How to use 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 example HTML to create a skeleton loader.

  • ph-item: required
  • ph-col-*: specify the number of columns
  • big: big text
  • ph-picture: image placeholder
  • ph-avatar: avatar placeholder
<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 in 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;

You Might Be Interested In:


Leave a Reply