https://github.com/ajwann/svg-loaders-react
React adaptation of the SVG Loaders library by Sam Herbert
https://github.com/ajwann/svg-loaders-react
loading loading-animations loading-indicator react react-component svg
Last synced: 18 days ago
JSON representation
React adaptation of the SVG Loaders library by Sam Herbert
- Host: GitHub
- URL: https://github.com/ajwann/svg-loaders-react
- Owner: ajwann
- License: other
- Created: 2019-01-26T21:59:59.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-02-17T12:27:22.000Z (4 months ago)
- Last Synced: 2025-04-12T12:55:08.145Z (about 2 months ago)
- Topics: loading, loading-animations, loading-indicator, react, react-component, svg
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/svg-loaders-react
- Size: 372 KB
- Stars: 107
- Watchers: 4
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://badge.fury.io/js/svg-loaders-react)
This is a zero-dependency React adaptation of Sam Herberts [SVG Loaders](https://github.com/SamHerbert/SVG-Loaders) library.
# Usage
## Install from NPM
```bash
npm install svg-loaders-react
```
## Import the SVGLoaders components
### Import all the loaders in a namespaced fashion
You can import all the loaders at once:
```js
import * as SVGLoaders from 'svg-loaders-react';
```
and use them in a namespaced manner:
```js
```
### Import an individual loader
You can also import a single loader:
```js
import { Bars } from 'svg-loaders-react'
```
and use it without any fancy namespacing:
```js
```
## Components
``````
``````
``````
``````
``````
``````
``````
``````
``````
``````
``````
``````
# Options
Each of these components should be able to accept any [SVG tag presentation attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation) as props.
# Common Usage
```Javascript
// render the Puff loader with a stroke opacity of .125
// render the Puff loader with a stroke of mint green
// render the Puff loader with a stroke of mint green and a stroke opactiy of .125
```