diff --git a/README.md b/README.md deleted file mode 100644 index 656f039..0000000 --- a/README.md +++ /dev/null @@ -1,75 +0,0 @@ -# 🔄 Sync Skeleton 💀 - -A CSS-only skeleton loader that supports syncing multiple elements' loading indicator at the same time. - -
- A skeleton loader with a single gradient going through all elements as if they were a single element - A dark version of the previous skeleton loader -
- -## Installation - -```shell -npm install sync-skeleton -``` - -## 📐 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%)` | `` | 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 | - -### 🎬 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)` | `` | 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. | - -### 📝 Example; - -```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](example) 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. diff --git a/README.md b/README.md new file mode 120000 index 0000000..3424914 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +./package/README.md \ No newline at end of file diff --git a/package/README.md b/package/README.md new file mode 100644 index 0000000..656f039 --- /dev/null +++ b/package/README.md @@ -0,0 +1,75 @@ +# 🔄 Sync Skeleton 💀 + +A CSS-only skeleton loader that supports syncing multiple elements' loading indicator at the same time. + +
+ A skeleton loader with a single gradient going through all elements as if they were a single element + A dark version of the previous skeleton loader +
+ +## Installation + +```shell +npm install sync-skeleton +``` + +## 📐 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%)` | `` | 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 | + +### 🎬 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)` | `` | 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. | + +### 📝 Example; + +```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](example) 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.