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: 2 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 10 years ago)
• Default Branch: master
• Last Pushed: 2023-01-25T01:05:07.000Z (over 1 year ago)
• Last Synced: 2024-07-24T16:12:46.407Z (2 months ago)
• Topics: loading-animations, preloader, react-loading, reactjs
• Language: JavaScript
• Homepage: https://codesandbox.io/s/mqx0ql55qp
• Size: 1.41 MB
• Stars: 806
• Watchers: 5
• Forks: 111
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-loading

[![Build Status](https://travis-ci.org/fakiolinho/react-loading.svg?branch=master)](https://travis-ci.org/fakiolinho/react-loading) [![Coverage Status](https://coveralls.io/repos/github/fakiolinho/react-loading/badge.svg?branch=master)](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