A single div, dynamic, fully customizable pure CSS skeletons library

Single div, dynamic, fully customizable CSS library.

Documentation

See full documentation

Getting Started

Use from CDN

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

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

or

Install from NPM

npm i css-skeletons

import 'css-skeletons'

Examples

A few example from documentation.

<div
  class="skeleton skeleton-line"
  style="
    --lines: 6; /* lines count */
    --l-h: 10px; /* line height */
    --l-gap: 8px; /* line gap */
"
></div>

<div class="skeleton skeleton-card-3"></div>

<div
  class="skeleton skeleton-list no-animate"
  style="
        --lines: 5;
        --bg: #ffb6b67d;
        --c-bg: #ff92922b;
        --bullet-ratio: 1.5;
        --l-gap: 15px;
"
></div>

Download Details:

Author: dgknca

Demo: https://dgknca.github.io/css-skeletons/docs/

Source Code: https://github.com/dgknca/css-skeletons

#css #javascript