Single Div, Dynamic and Fully Customizable CSS library

No SVG, No Image. (1.7 Kb Minified, Gzipped)
Star

Getting Started

Use from CDN

<!-- UNPKG -->
<link rel="stylesheet" href="https://unpkg.com/css-skeletons@1.0.7/dist/css-skeletons.min.css" />

or

<!-- JSDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-skeletons@1.0.7/dist/css-skeletons.min.css" />
Or

Install from NPM

npm i css-skeletons
import 'css-skeletons'

Custom Variables

Variable Description Default Valid Class
--c-w Container width. 300px Valid For All
--c-p Container padding. 10px
--c-bg Container background. transparent
--bg Shapes background. #e2e1eb
--shine Shine animation color. rgba(255,255,255, 0.2)
--t Shine animation duration. 2s
--lines Lines count. 1
.skeleton-line .skeleton-rect .skeleton-circle-multi-line .skeleton-card-2 .skeleton-card-3 .skeleton-list
--l-h Line height. 20px
.skeleton-line .skeleton-rect .skeleton-circle-multi-line .skeleton-card-2 .skeleton-card-3 .skeleton-list .skeleton-youtube
--l-gap Gap between the lines. 10px
--g-gap Gap between the groups. E.g. circle and other lines. 15px
.skeleton-rect .skeleton-circle-line .skeleton-circle-multi-line .skeleton-card-1 .skeleton-card-2 .skeleton-card-3 .skeleton-list .skeleton-youtube
--c-s Circle size. 40px
.skeleton-circle .skeleton-circle-line .skeleton-circle-multi-line .skeleton-card-1 .skeleton-card-3 .skeleton-youtube
--c-pos Circle position. center (can be top, bottom, center or percent value)
.skeleton-circle-line .skeleton-circle-multi-line
--rect-h Rectangle height. 80px
.skeleton-rect .skeleton-youtube
--chart-h Chart height. 200px
.skeleton-chart-columns .skeleton-chart-line
--chart-btm Chart bottom height. 40px
.skeleton-chart-line
--cols Columns count. 5 (Max 10)
.skeleton-chart-columns
--col-w Column width. 25px
--col-gap Gap between columns. 25px
--card-h Card height. 150px
.skeleton-card-1
--f-l-w First line width. 90%
.skeleton-card-2 .skeleton-card-3
--f-l-h First line height. 25px
--s-l-w Second line width. 70%
--s-l-h Second line height. 20px
--s-l-m-t Second line margin-top. 15px
--f-l-c First line color. #e2e1eb
.skeleton-card-2
--s-l-c Second line color. #e2e1eb
--bullet-ratio Bullet size depending on --l-h.
*Note that, must be equal or bigger than 1. 		1.4
.skeleton-list
--i-w Width and height of .skeleton-image 250px
.skeleton-image

Helper Classes

Class Description Required Class
.adapt-to-circle No --lines needed. Just need to set --c-s (circle-size). The lines will be produced and placed automatically based on the size of the circle.
.skeleton-circle-multi-line
.no-animate Cancels the animation.

Examples

.skeleton-line
--l-h
--lines
--l-gap 
<div class="skeleton skeleton-line"></div>

If you want to change the default values, you can override it easily in style attribute. 

<div 
  class="skeleton skeleton-line" 
  style="--l-h: 40px;"
></div>

No height needed. The height will be calculated automatically based on the count of lines and other values. 

<div 
  class="skeleton skeleton-line" 
  style="
    --lines: 3;
    --c-w: 100%;
  "
></div>
<div 
  class="skeleton skeleton-line" 
  style="
    --lines: 3;
    --l-gap: 20px;
  "
></div>
<div 
  class="skeleton skeleton-line" 
  style="
    --lines: 4;
    --c-bg: #F8F7FC;
  "
></div>
<div 
  class="skeleton skeleton-line" 
  style="
    --lines: 3;
    --c-bg: #faecf6;
    --bg: #eeb6e0;
    --shine: #f5c3da;
  "
></div>

Are custom properties too long? You can store them in a class. 

<style>
.my-class {
    --lines: 3;
    --c-bg: #faecf6;
    --c-p: 30px;
    --bg: #eeb6e0;
    --shine: #f5c3da;
}
</style>

<div class="skeleton skeleton-line my-class"></div>
.skeleton-rect
--rect-h
--g-gap

You can add another big rectangle with .skeleton-rect class. 

<div 
  class="skeleton skeleton-rect" 
  style="
    --rect-h: 150px;
    --lines: 3;
  "
></div>
<div 
  class="skeleton skeleton-rect" 
  style="
    --rect-h: 100px;
    --lines: 2;
    --g-gap: 30px;
  "
></div>
.skeleton-circle
--c-s

Simple circle.

<div 
  class="skeleton skeleton-circle" 
  style="--c-s: 60px;"
></div>
.skeleton-circle-line
--c-s
--c-pos
--l-h
--g-gap

Side by side circle and line.

<div 
  class="skeleton skeleton-circle-line"
></div>
<div 
  class="skeleton skeleton-circle-line" 
  style="
    --c-w: 500px;
    --c-s: 60px;
    --l-h: 30px;
    --g-gap: 30px;
  "
></div>
.skeleton-circle-multi-line
--c-s
--c-pos
--l-h
--lines
--g-gap

If you want to use multiple lines, you must use .skeleton-circle-multi-line class.
*Note that, the lines height must be bigger than the circle height. 

<div 
  class="
    skeleton 
    skeleton-circle-multi-line
  " 
  style="
    --c-s: 80px;
    --c-pos: top;
    --lines: 4;
  "
></div>
.adapt-to-circle

Just set --c-s (circle-size). The lines will be produced and placed automatically based on the size of the circle. 

<div 
  class="
    skeleton 
    skeleton-circle-multi-line 
    adapt-to-circle
  " 
  style="
    --c-s: 150px;
    --c-w: 450px;
  "
></div>
.skeleton-chart-columns
--cols
--col-w
--col-gap
--chart-h

You don't need to set --c-w (container-width). The width will be calculated automatically based on the count of columns and size of columns gap. 

<div class="skeleton skeleton-chart-columns"></div>
<div 
  class="skeleton skeleton-chart-columns" 
  style="
    --cols: 10;
    --col-w: 30px;
    --col-gap: 20px;
  "
></div>
.skeleton-chart-line
--chart-h
--chart-btm 
<div 
  class="skeleton skeleton-chart-line" 
  style="--c-w: 500px;"
></div>
<div 
  class="skeleton skeleton-chart-line" 
  style="
    --c-w: 400px;
    --chart-h: 150px;
    --chart-btm: 60px;
  "
></div>
.skeleton-card-1
--card-h Default 150px
--g-gap Default 30px
--c-s Default 30px

Dimensions of the lines and the big rectangle will be calculated automatically based on the --c-w (container-width). 

<div 
  class="skeleton skeleton-card-1"
  style="
    --c-w: 500px;
    --card-h: 120px;
  "
></div>
.skeleton-card-2
--f-l-w
--f-l-h
--f-l-c
--s-l-w
--s-l-h
--s-l-c
--s-l-m-t
--l-h
--lines Max. 6 
<div 
  class="skeleton skeleton-card-2" 
  style="
    --c-w: 500px;
    --lines: 3;
    --f-l-c: rgba(103,89,255,0.3);
    --s-l-c: rgba(54,216,175,0.3);
  "
></div>
.skeleton-card-3
--c-s Default 50px
--g-gap Default 30px
--f-l-w Default 200px
--f-l-h Default 20px
--s-l-w Default 130px
--s-l-h Default 10px
--s-l-m-t Default 10px
--l-h Default 10px
--l-gap
--lines Default 3
--c-w Default 100%

*Note that, the --c-s must be equal or bigger than the --f-l-h + --s-l-h + --l-h 

<div class="skeleton skeleton-card-3"></div>
.skeleton-list
--l-h
--lines
--l-gap
--bullet-ratio 
<div 
  class="skeleton skeleton-list" 
  style="
    --lines: 5;
    --c-w: 400px;
  "
></div>
.skeleton-youtube
--rect-h Default 150px
--c-s Default 36px
--l-h
--g-gap Default 10px
--l-gap 
<div class="skeleton skeleton-youtube"></div>
.skeleton-image
--i-w 
<div 
  class="skeleton skeleton-image" 
  style="
    --i-w: 300px;
    --c-bg: #f8f7fc;
  "
></div>