Facebook Inspired Skeleton Loader In Pure CSS – Placeholder Loading

Author: zalog
Views Total: 2,944 views
Official Page: Go to website
Last Update: April 9, 2021
License: MIT


Facebook Inspired Skeleton Loader In Pure CSS – Placeholder Loading


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 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 class="ph-col-2">
    <div class="ph-avatar"></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>

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;


v0.5.0 (08/09/2021)

v0.4.0 (04/03/2021)

See also  Adding Hyphens to Text with the CSS hyphens Property

Leave a Reply

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