Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ngeenx/nx-svg-loaders

Angular, React, Svelte, Vue SVG loader/spinner collection.
https://github.com/ngeenx/nx-svg-loaders

angular-loaders loaders react-loaders spinners svelte-loaders svg-loaders svg-spinners vue-loaders

Last synced: about 2 months ago
JSON representation

Angular, React, Svelte, Vue SVG loader/spinner collection.

Host: GitHub
URL: https://github.com/ngeenx/nx-svg-loaders
Owner: ngeenx
License: mit
Created: 2024-09-13T01:35:16.000Z (4 months ago)
Default Branch: main
Last Pushed: 2024-11-04T12:06:57.000Z (2 months ago)
Last Synced: 2024-11-04T12:10:10.959Z (2 months ago)
Topics: angular-loaders, loaders, react-loaders, spinners, svelte-loaders, svg-loaders, svg-spinners, vue-loaders
Language: TypeScript
Homepage: https://ngeenx.github.io/nx-svg-loaders/
Size: 15 MB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

fucking-awesome-angular - nx-svg-loaders - Angular, React, Svelte, Vue SVG loader/spinner collection. (Table of contents / Third Party Components)
awesome-angular - nx-svg-loaders - Angular, React, Svelte, Vue SVG loader/spinner collection. (Table of contents / Third Party Components)

README

        # 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. We cannot 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.

## 📄 Documentation

Please check the **[documentation](https://ngeenx.github.io/nx-svg-loaders/)** for installation and usage.

Supported Frameworks:

| Framework | Docs | Live Demo | Live Demo Source |

|---|---|---|---|

| Angular | [Docs](https://ngeenx.github.io/nx-svg-loaders/docs/category/angular) | [Stackblitz](https://stackblitz.com/~/github.com/ngeenx/nx-angular-svg-loaders-demo) | [Demo Source](https://github.com/ngeenx/nx-angular-svg-loaders-demo) |

| React | [Docs](https://ngeenx.github.io/nx-svg-loaders/docs/category/react) | [Stackblitz](https://stackblitz.com/~/github.com/ngeenx/nx-react-svg-loaders-demo) | [Demo Source](https://github.com/ngeenx/nx-react-svg-loaders-demo) |

| Svelte | [Docs](https://ngeenx.github.io/nx-svg-loaders/docs/category/svelte) | [Stackblitz](https://stackblitz.com/~/github.com/ngeenx/nx-svelte-svg-loaders-demo) | [Demo Source](https://github.com/ngeenx/nx-svelte-svg-loaders-demo) |

| Vue | [Docs](https://ngeenx.github.io/nx-svg-loaders/docs/category/vue) | [Stackblitz](https://stackblitz.com/~/github.com/ngeenx/nx-vue-svg-loaders-demo) | [Demo Source](https://github.com/ngeenx/nx-vue-svg-loaders-demo) |