🔄 Sync Skeleton 💀

A CSS-only skeleton loader that supports syncing multiple elements' loading indicator at the same time.

Installation

``shell
npm install sync-skeleton
`

The only prerequisite to using this package is the CSS file. Import it in your project via TypeScript:

`typescript
// Required for usage
import 'sync-skeleton/skeleton.css'
`

Or via HTML:

`html

`

Then, add the loading-skeleton class to any element you want to have the skeleton loader applied to.

`html


| Variable | default | type | Description |
| ---------------------------------------- | --------------------------- | ---------- | -------------------------------------------------- |
| --skeleton-base-color | hsl(0 0% 92% / 100%) | | The base color of the skeleton |
| --skeleton-base-color-dark | hsl(0 0% 20% / 100%) | | The base color of the skeleton in dark mode |
| --skeleton-highlight-color | hsl(0 0% 96% / 100%) | | The highlight color of the skeleton |
| --skeleton-highlight-color-dark | hsl(0 0% 15% / 100%) | | The highlight color of the skeleton in dark mode |
| --skeleton-highlight-size | clamp(100px, 50vw, 500px) | | The width of the highlight wave gradient |
| --skeleton-highlight-leading-edge-blur | clamp(10px, 5vw, 50px) | | How much to blur the leading edge of the highlight |
| --skeleton-radius | 0px | | The radius of the skeleton |
| --skeleton-angle | 90deg | | The angle of the highlight |

$3

Animation variables are only global (not per-element) and editable via the :root {} selector.

| Variable | default | type | Description |
| --------------------------------------- | ------------------------------------ | ------------------- | ------------------------------------------------------------------------------------------------ |
| --skeleton-ease | cubic-bezier(0.45, 0.3, 0.7, 0.55) | | The ease of the animation |
| --skeleton-animation-animation-speed | 400 | | _(px)_ - The distance the animation will travel in pixels |
| --skeleton-animation-animation-time | 1 | | _(seconds)_ - The time of each animation loop |
| --skeleton-animation-animation-scaler | 0.7 | | _(0-1)_ - How much to scale the animation speed up as the screen size increases, 0.7 feels good. |

$3

`css
/ example of modifying the default color variables /
:root {
/ apply to all loader elements /
--skeleton-radius: 4px;
}
.orange-purple-loader {
/ apply to loaders with the 'orange-purple-loader' class only /
--skeleton-base-color: tomato;
--skeleton-base-color-dark: darkred;
--skeleton-highlight-color: darkslateblue;
--skeleton-highlight-color-dark: indigo;
}
`

See the examples folder for more detailed examples with different frameworks.

🌙 Dark Mode;

We automatically apply dark mode to the skeleton when the color-scheme is set to dark or light dark and the prefers-color-scheme is set to dark,
which will then draw on the --skeleton-base-color-dark and --skeleton-highlight-color-dark variables.

Additionally, you can add the dark class to the skeleton to force dark mode.

`html


Or if your entire application is a dark theme, then you can simply change
the --skeleton-base-color` to an appropriate shade of your choice.