diff --git a/README.md b/README.md index 3424914..eb31e8c 120000 --- a/README.md +++ b/README.md @@ -1 +1 @@ -./package/README.md \ No newline at end of file +./package/README.md diff --git a/example/README.md b/example/README.md index 1cf8892..5421544 100644 --- a/example/README.md +++ b/example/README.md @@ -4,3 +4,9 @@ To run this example: - `npm install` - `npm run dev` + +# TailwindCSS Example + +## Using Sync-Skeleton with TailwindCSS; + +Here's a [live demo on the tailwind playground](https://play.tailwindcss.com/wruRA5Hk7Q)! diff --git a/media/icons/js.png b/media/icons/js.png new file mode 100644 index 0000000000000000000000000000000000000000..9ac7050600b07031ec72e4299fc1034123a0cd5c GIT binary patch literal 1116 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 literal 0 HcmV?d00001 diff --git a/media/icons/sveltejs.png b/media/icons/sveltejs.png new file mode 100644 index 0000000000000000000000000000000000000000..535c974c78c92be898696893be78023e8ca4945a GIT binary patch literal 1990 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 literal 0 HcmV?d00001 diff --git a/media/icons/vuejs.png b/media/icons/vuejs.png new file mode 100644 index 0000000000000000000000000000000000000000..73883b320d91d2f2f562571aed9c549d8db9af5b GIT binary patch literal 1316 zcmeAS@N?(olHy`uVBq!ia0y~yU@!n-4mJh`hH$2z?Fdm5M*l z9SjbMCj5QL|CMjkm+gshlctw+)Y^BkO}w7HpHJpbiuU=0-?Q_3XNZ5T-Z}ZE_UC;e z{6)Q8;u8)9SX|g>ds*SN@9$qt*&QnJNlGebCd)}NKYp+I&){>!wF>tKN7#S=Hs+mm z@BZbiKW3E@pCi8|h)(&PSLU`&l6CT|W4k=O3;arVu6@K^TJP8K#Y*hV98ae&7b+Q= z?{h5)+iO_zWb>+?pDDMy*So&_nqqlzv%5e0$Z@kT30l2JWSGqAF_hbN3#I*HXxjV!QWjYsKpgGutw4 zJ_Hwk@IP}xP_?YJs_#_GmIY5`=d=EO&7Co+qLL$H{XO2GrAisHx5{lU{1nMLz$U}` z1eN;dklR45N?@xsx?sEN45Q68rGkH#znCK2Z34}CT&apM+-28C0 z-^VwFUr%0La3@@IlPv%HcLz>SHoUx*!FM@N-4(nYKOUQIhXBu=dza`Bb@l0aK8Yj74S!laTtc=SRN2S;Kh#nrPFL z!h4!K8e%LvL#8%<Nh)e8p_378}@2j-ci5#Q@^2H%-6w-<(%i6 zn*Mw5Im)#UCdA1b&5IXQ?|fJ8<>s)8>*ky%CHsSen95piNsBC+=XYN{@^+ftp3N(= z6=ZcLPyY0DZnToZSEkay?)Wr?+#9zrnE3HFfe$!`njxgN@xNAExvyW literal 0 HcmV?d00001 diff --git a/package/README.md b/package/README.md index 4155df3..31b968d 100644 --- a/package/README.md +++ b/package/README.md @@ -2,11 +2,25 @@ 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 +
+
- 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 + Compatible with all frameworks, including TailwindCSS
+ TailwindCSS + ReactJS + SvelteJS + VueJS + Vanilla JS + And more!
+

+ ## Installation ```shell @@ -26,12 +40,50 @@ Or via HTML: ``` +

+ +## Usage + Then, add the `loading-skeleton` class to any element you want to have the skeleton loader applied to. ```html
``` +### 📝 Examples; + +#### Custom colored loader; + +```css +: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; + max-width: 300px; + aspect-ratio: 4/3; +} +``` + +```html +
+``` + +#### Using Sync-Skeleton in a typical project; + +See the [example folder for more detailed usage with Vite](example). + +#### Using Sync-Skeleton with TailwindCSS; + +Here's a [live demo on the tailwind playground](https://play.tailwindcss.com/wruRA5Hk7Q)! + +

+ ## 📐 CSS Variables for customising ### 🎨 Styling / Design; @@ -60,24 +112,7 @@ Animation variables are only global (not per-element) and editable via the `:roo | `--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 [example folder](example) for more detailed usage with Vite. +

## 🌙 Dark Mode; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0f03eeb..7441d65 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -43,7 +43,7 @@ importers: example: dependencies: sync-skeleton: - specifier: ^0.0.5 + specifier: ^1.0.2 version: link:../package devDependencies: vite: @@ -1386,15 +1386,6 @@ packages: de-indent@1.0.2: resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} - debug@4.4.1: - resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==} - engines: {node: '>=6.0'} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - debug@4.4.3: resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} engines: {node: '>=6.0'} @@ -4098,10 +4089,6 @@ snapshots: de-indent@1.0.2: {} - debug@4.4.1: - dependencies: - ms: 2.1.3 - debug@4.4.3: dependencies: ms: 2.1.3 @@ -4303,7 +4290,7 @@ snapshots: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.6 - debug: 4.4.1 + debug: 4.4.3 escape-string-regexp: 4.0.0 eslint-scope: 8.4.0 eslint-visitor-keys: 4.2.1