https://github.com/dkress59/react-loading-icons
A TypeScript-React edition of Sam Herbert's amazing SVG Loaders.
https://github.com/dkress59/react-loading-icons
loaders loading-animation loading-animations loading-spinner loading-spinners react react-library react-loader react-loading react-loading-animation react-svg svg svg-animations svg-icons svg-loaders svg-loading typescript typescript-library typescript-react typescript-react-components
Last synced: 1 day ago
JSON representation
A TypeScript-React edition of Sam Herbert's amazing SVG Loaders.
- Host: GitHub
- URL: https://github.com/dkress59/react-loading-icons
- Owner: dkress59
- License: other
- Created: 2021-02-16T18:16:38.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-02-04T04:55:00.000Z (over 2 years ago)
- Last Synced: 2025-09-15T09:43:06.700Z (29 days ago)
- Topics: loaders, loading-animation, loading-animations, loading-spinner, loading-spinners, react, react-library, react-loader, react-loading, react-loading-animation, react-svg, svg, svg-animations, svg-icons, svg-loaders, svg-loading, typescript, typescript-library, typescript-react, typescript-react-components
- Language: TypeScript
- Homepage: https://loading.damiankress.de
- Size: 3.4 MB
- Stars: 58
- Watchers: 2
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Loading Icons
[](https://badge.fury.io/js/react-loading-icons)
[](https://img.shields.io/npm/dw/react-loading-icons.svg)
[](https://codecov.io/gh/dkress59/react-loading-icons)
A pure SVG zero-dependency React adaptation of Sam Herbert's [SVG Loaders](https://github.com/SamHerbert/SVG-Loaders) library.
**Built with React 17 and TypeScript.**
Check out the [Demo](https://loading.damiankress.de)!
Also works with JavaScript, of course (supports ESM tree shaking).
## Usage
### Install from NPM
```bash
yarn add react-loading-icons
```
```bash
npm install react-loading-icons
```
### Import all the loaders in a namespaced fashion
You can import all the loaders at once:
```ts
import LoadingIcons from 'react-loading-icons'
```
and use them in a namespaced manner:
```tsx
```
### Import an individual loader
You can also import a single loader:
```ts
import { Bars } from 'react-loading-icons'
```
and use it without any fancy namespacing:
```tsx
```
You can even go as far as copying over a single .js file from the `dist/components` directory to your project — this way you can directly import a certain loading icon without having to import the whole package.
### Components
```tsx
```
## Options
Each of these components will accept any [SVG tag presentation attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation) as well as all valid JSX properties (`key`, `onClick`, …) as props. Animation speed can be controlled via **speed** attribute (`1` = 100% speed, `.5` = 50% speed, `2` = 200%, and so on). The components are also smart about inheriting `fill`, `fillOpacity`, `stroke`, `strokeOpactiy` and `strokeWidth`, so these can also easily be controlled.
## Common Usage
```tsx
// renders the Puff icon with a mint green stroke
// renders the Puff icon's mint green stroke with an opacity of 12.5%
// renders the Puff icon at 75% speed with a mint green stroke with an opacity of 12.5%
```