https://github.com/fakiolinho/react-loading
React component for loading animations
https://github.com/fakiolinho/react-loading
loading-animations preloader react-loading reactjs
Last synced: 6 months ago
JSON representation
React component for loading animations
- Host: GitHub
- URL: https://github.com/fakiolinho/react-loading
- Owner: fakiolinho
- Created: 2014-12-23T05:26:06.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2023-01-25T01:05:07.000Z (almost 3 years ago)
- Last Synced: 2025-05-07T09:02:16.125Z (7 months ago)
- Topics: loading-animations, preloader, react-loading, reactjs
- Language: JavaScript
- Homepage: https://codesandbox.io/s/mqx0ql55qp
- Size: 1.41 MB
- Stars: 814
- Watchers: 4
- Forks: 109
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- Awesome-JavaScript-Libraries - **React-Loading**
README
# react-loading
[](https://travis-ci.org/fakiolinho/react-loading) [](https://coveralls.io/github/fakiolinho/react-loading?branch=master)
Easy to use loading animations for React projects. Uses SVG animations from Brent Jackson's [loading](https://github.com/jxnblk/loading) project.
## Installation
```
npm i react-loading
```
or
```
yarn add react-loading
```
## Demo
Check [here](https://codesandbox.io/s/mqx0ql55qp)
## Loading Types
* blank
* balls
* bars
* bubbles
* cubes
* cylon
* spin
* spinningBubbles
* spokes
## Examples
```javascript
import React from 'react';
import ReactLoading from 'react-loading';
const Example = ({ type, color }) => (
);
export default Example;
```
```javascript
import React from 'react';
import ReactLoading from 'react-loading';
const Example = ({ type, color }) => (
);
export default Example;
```
### Props
| Name | Type | Default Value |
|:------:|:------:|:---------------:|
| type | String | balls |
| color | String | `#ffffff` |
| delay | Number | 0 (msecs) |
| height | Number or String | 64 (px) |
| width | Number or String | 64 (px) |
| className | String | `''` |
## License
MIT