diff --git a/README.md b/README.md index a21e74a..8c21f9a 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # nx-svg-loaders +[![SVG Loaders Preview](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)](https://ngeenx.github.io/nx-svg-loaders/) + 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 `` tag or import directly as inline code. You can not style SVG content over `` tag. Also, inline option is not good for clean development experience. We created this project for smooth and better experience for developers. @@ -10,11 +12,7 @@ Please check the **[documentation](https://ngeenx.github.io/nx-svg-loaders/)** f Supported Frameworks: -- [Angular](https://ngeenx.github.io/nx-svg-loaders/docs/category/angular) +- Angular: [Docs](https://ngeenx.github.io/nx-svg-loaders/docs/category/angular) / [Live Demo](https://stackblitz.com/edit/nx-angular-svg-loaders-demo) - [React](https://ngeenx.github.io/nx-svg-loaders/docs/category/react) - [Svelte](https://ngeenx.github.io/nx-svg-loaders/docs/category/svelte) - [Vue](https://ngeenx.github.io/nx-svg-loaders/docs/category/vue) - -## 👁️ Preview - -[![SVG Loaders Preview](https://github.com/ngeenx/nx-svg-loaders/blob/main/docs/static/img/nx-svg-loaders-preview.gif?raw=true)](https://ngeenx.github.io/nx-svg-loaders/) diff --git a/docs/docs/angular/loaders.mdx b/docs/docs/angular/loaders.mdx index 7ac956f..aec8af1 100644 --- a/docs/docs/angular/loaders.mdx +++ b/docs/docs/angular/loaders.mdx @@ -4,6 +4,8 @@ sidebar_position: 2 # Loaders +**[⚡️ Play on StackBlitz](https://stackblitz.com/edit/nx-angular-svg-loaders-demo)** + import { loaderTypes } from "./../../../libs/utils/nx-svg-shared-utils/src/index"; Available loader types: