diff --git a/README.md b/README.md index 82d7484..739a23d 100644 --- a/README.md +++ b/README.md @@ -2,45 +2,58 @@ A framework agnostic skeleton loader that supports syncing multiple elements' loading indicator at the same time. -![A skeleton loader with a line going through multiple elements at the same time despite different widths](./media/skeleton.gif) +
+ 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 +
## 📐 CSS Variables for customising ### 🎨 Styling / Design; -| 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 | +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; -| Variable | default | type | Description | -|----------|---------|------|-------------| -| `--skeleton-repeat` | `infinite` | `` | How many times the animation will repeat | -| `--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. | +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 { - --skeleton-base-color: orangered; - --skeleton-base-color-dark: tomato; + /* 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](./examples) 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`, @@ -49,9 +62,7 @@ which will then draw on the `--skeleton-base-color-dark` and `--skeleton-highlig 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 diff --git a/examples/react/simple/src/App.tsx b/examples/react/simple/src/App.tsx index 705a8a7..dc81b69 100644 --- a/examples/react/simple/src/App.tsx +++ b/examples/react/simple/src/App.tsx @@ -6,11 +6,11 @@ function App() { return (
-
- +
+
-
- +
+
) diff --git a/examples/react/simple/src/components/card.module.css b/examples/react/simple/src/components/card.module.css index 635f138..2c1ed16 100644 --- a/examples/react/simple/src/components/card.module.css +++ b/examples/react/simple/src/components/card.module.css @@ -1,7 +1,12 @@ .container { - display: flex; + display: inline-flex; flex-direction: row; gap: 1rem; + padding: 1rem; + &.dark { + color-scheme: dark; + background-color: hsl(0 0% 10% / 100%); + } } .image { diff --git a/examples/react/simple/src/components/card.tsx b/examples/react/simple/src/components/card.tsx index b71e9c5..a26498e 100644 --- a/examples/react/simple/src/components/card.tsx +++ b/examples/react/simple/src/components/card.tsx @@ -1,8 +1,8 @@ import styles from './card.module.css' -export function Card() { +export function Card(props: { dark?: boolean, className?: string }) { return ( -
+
- + let { dark = false, class: className = '' } = $props(); -
-
-
-
-
- lorem ipsum dolor sit amet -
-
-
-
-
-
-
-
-
-
+
+
+
+
lorem ipsum dolor sit amet
+
+
+
+
+
+
\ No newline at end of file + .circle { + width: 18px; + height: 18px; + border-radius: 50%; + } + diff --git a/examples/svelte/simple/src/routes/+page.svelte b/examples/svelte/simple/src/routes/+page.svelte index 98961d3..6c45e34 100644 --- a/examples/svelte/simple/src/routes/+page.svelte +++ b/examples/svelte/simple/src/routes/+page.svelte @@ -6,10 +6,10 @@ import Card from '$lib/components/Card.svelte'
- +
- +
@@ -19,6 +19,7 @@ import Card from '$lib/components/Card.svelte' color-scheme: light dark; background-color: light-dark(white, hsl(0 0% 10%)); color: light-dark(black, white); + --skeleton-radius: 4px; } .container { @@ -28,11 +29,11 @@ import Card from '$lib/components/Card.svelte' } .card2 { - margin-left: 16px; + margin-left: 10rem; } .card3 { - margin-left: 32px; + margin-left: 20rem; } \ No newline at end of file diff --git a/examples/vue/simple/src/App.vue b/examples/vue/simple/src/App.vue index 9681fdb..2bc4f5c 100644 --- a/examples/vue/simple/src/App.vue +++ b/examples/vue/simple/src/App.vue @@ -7,10 +7,10 @@ import Card from './components/Card.vue'
- +
- +
@@ -20,6 +20,14 @@ import Card from './components/Card.vue' color-scheme: light dark; background-color: light-dark(white, hsl(0 0% 10%)); color: light-dark(black, white); + --skeleton-radius: 4px; +} + +.orange-purple-loader { + --skeleton-base-color: tomato; + --skeleton-highlight-color: darkred; + --skeleton-base-color-dark: darkslateblue; + --skeleton-highlight-color-dark: indigo; } .container { @@ -29,10 +37,10 @@ import Card from './components/Card.vue' } .card2 { - margin-left: 16px; + margin-left: 10rem; } .card3 { - margin-left: 32px; + margin-left: 20rem; } diff --git a/examples/vue/simple/src/components/Card.vue b/examples/vue/simple/src/components/Card.vue index f327358..83e4cc0 100644 --- a/examples/vue/simple/src/components/Card.vue +++ b/examples/vue/simple/src/components/Card.vue @@ -1,8 +1,13 @@ - -