Skeleton Elements


You can install Skeleton Elements via npm:

npm i skeleton-elements --save



Skeleton Elements requires stylesheet to be included:

<link rel="stylesheet" href="path/to/skeleton-elements.css" />

With bundler (like webpack) you can import styles directly from JavaScript:

import 'skeleton-elements/skeleton-elements.css';

Or it can be included for each component separately:


SCSS styles are also included:

CSS Custom Properties (Variables)

There are following CSS Variables available:

Skeleton Block

Skeleton block is just a usual block element with gray background color, that can be in any required size.

To make Skeleton Block, we need to add skeleton-block class to element:

Skeleton Text

Skeleton text uses custom Skeleton font for making responsive text placeholders.

Special Skeleton font renders every character as small gray rectangle. When we wrap text with skeleton-text class, it converts text to gray blocks/lines. Advantage over Skeleton Block is that such "skeleton text" can be fully responsive and its size will reflect actual text size.

Skeleton text font supports following characters set (including "space"):

0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z _ -   . , : ; / ! / * & ' " | ( ) { } [ ]

Custom Fonts

As mentioned above Skeleton Text support specific subset of Latin characters and numbers. In addition to this there are following language fonts available:

For example, to add Russian language support, register the font in your CSS:

@font-face {
  font-family: 'skeleton-ru';
  src: url('/path-to/skeleton-elements/fonts/skeleton-ru.woff2') format('woff2'),
    url('/path-to/skeleton-elements/fonts/skeleton-ru.woff') format('woff');

.skeleton-text-ru {
  font-family: 'skeleton-ru';

And then use in your layout along with skeleton-text class:

<div class="skeleton-text skeleton-text-ru">Текст на русском</div>

Loading Effects

There are following loading effects available:

To add loading effect to any element just add skeleton-effect-${effectName} class, e.g.

<!-- skeleton block with "pulse" loading effect -->
<div class="skeleton-block skeleton-effect-pulse"></div>

<!-- skeleton text with "fade" loading effect -->
<p class="skeleton-text skeleton-effect-fade">...</p>

<!-- custom block with "wave" loading effect -->
<div class="skeleton-effect-wave">
  <h1 class="skeleton-text">...</h1>
  <h2 class="skeleton-text">...</h1>
  <p class="skeleton-text">...</p>
  <p class="skeleton-text">...</p>
  <div class="skeleton-block">...</div>