Add preview GIF

ngeenx · Sep 19, 2024 · d7976a0 · d7976a0
1 parent d94236a
commit d7976a0
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 0 deletions.
diff --git a/docs/docs/intro.md b/docs/docs/intro.md
@@ -7,3 +7,5 @@ sidebar_position: 1
 This repository is based on [Sam Herbert](https://github.com/SamHerbert)'s [SVG-Loaders](https://github.com/SamHerbert/SVG-Loaders) project. There are many loadig indicator display strategy like *JS, CSS, GIF, Lottie and Custom Fonts*. **SVG** is another loading indicator/spinner option because it's supporting animations natively on browsers and [widely supporting](https://caniuse.com/svg-smil). This project aims to provide ready-to-use SVG loader examples as components in *Angular, React, Vue, Svelte* without broke your development environment experience.
 
 > Basicly we can use SVG files with `<img>` tag or import directly as inline code. You can not style SVG content over `<img>` tag. Also, inline option is not good for clean development experience. We created this project for smooth and better experience for developers.
+
+![alt text](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)
diff --git a/libs/features/nx-angular-svg-loaders/README.md b/libs/features/nx-angular-svg-loaders/README.md
@@ -1,3 +1,5 @@
 # nx-angular-loaders
 
+![alt text](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)
+
 Angular SVG loader collection. Please check the **[documentation](https://ngeenx.github.io/nx-svg-loaders/docs/category/angular)** installation and usage.
diff --git a/libs/features/nx-react-svg-loaders/README.md b/libs/features/nx-react-svg-loaders/README.md
@@ -1,3 +1,5 @@
 # nx-react-svg-loaders
 
+![alt text](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)
+
 React SVG loader collection. Please check the **[documentation](https://ngeenx.github.io/nx-svg-loaders/docs/category/react)** installation and usage.
diff --git a/libs/features/nx-svelte-svg-loaders/README.md b/libs/features/nx-svelte-svg-loaders/README.md
@@ -1,3 +1,5 @@
 # nx-svelte-svg-loaders
 
+![alt text](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)
+
 Svelte SVG loader collection. Please check the **[documentation](https://ngeenx.github.io/nx-svg-loaders/docs/category/svelte)** installation and usage.
diff --git a/libs/features/nx-vue-svg-loaders/README.md b/libs/features/nx-vue-svg-loaders/README.md
@@ -1,3 +1,5 @@
 # nx-vue-svg-loaders
 
+![alt text](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)
+
 Vue SVG loader collection. Please check the **[documentation](https://ngeenx.github.io/nx-svg-loaders/docs/category/vue)** installation and usage.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,5 @@ sidebar_position: 1
		This repository is based on [Sam Herbert](https://github.com/SamHerbert)'s [SVG-Loaders](https://github.com/SamHerbert/SVG-Loaders) project. There are many loadig indicator display strategy like JS, CSS, GIF, Lottie and Custom Fonts. SVG is another loading indicator/spinner option because it's supporting animations natively on browsers and [widely supporting](https://caniuse.com/svg-smil). This project aims to provide ready-to-use SVG loader examples as components in Angular, React, Vue, Svelte without broke your development environment experience.

		> Basicly we can use SVG files with `<img>` tag or import directly as inline code. You can not style SVG content over `<img>` tag. Also, inline option is not good for clean development experience. We created this project for smooth and better experience for developers.

		![alt text](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)