🔄 Sync Skeleton 💀

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

Installation

npm install sync-skeleton

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

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

Or via HTML:

<link rel="stylesheet" href="node_modules/sync-skeleton/skeleton.css" />

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

<div class="loading-skeleton" style="width: 200px; height: 20px;"></div>

📐 CSS Variables for customising

🎨 Styling / Design;

These can be overridden on a per-element basis.

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

🎬 Animation;

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) | <easing-function> | The ease of the animation | | --skeleton-animation-animation-speed | 400 | <number> | (px) - The distance the animation will travel in pixels | | --skeleton-animation-animation-time | 1 | <number> | (seconds) - The time of each animation loop | | --skeleton-animation-animation-scaler | 0.7 | <number> | (0-1) - How much to scale the animation speed up as the screen size increases, 0.7 feels good. |

📝 Example;

/* 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.

<div class="loading-skeleton dark">...</div>

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.