Single div, dynamic, fully customizable CSS library.
Documentation
See full documentation
Getting Started
Use from CDN
<link rel="stylesheet" href="https://unpkg.com/css-skeletons@1.0.7/dist/css-skeletons.min.css"/>
<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'
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>
![example 1](https://github.com/dgknca/css-skeletons/raw/HEAD/./demo/assets/img/skeleton-line.png)
<div class="skeleton skeleton-card-3"></div>
![example 2](https://github.com/dgknca/css-skeletons/raw/HEAD/./demo/assets/img/skeleton-card-3.png)
<div
class="skeleton skeleton-list no-animate"
style="
--lines: 5;
--bg: #ffb6b67d;
--c-bg: #ff92922b;
--bullet-ratio: 1.5;
--l-gap: 15px;
"
></div>
![example 3](https://github.com/dgknca/css-skeletons/raw/HEAD/./demo/assets/img/skeleton-list.png)