https://github.com/keske/react-loading-order-with-animation

React Loading Order With Animation
https://github.com/keske/react-loading-order-with-animation

animation order react reactjs

Last synced: 3 months ago
JSON representation

React Loading Order With Animation

• Host: GitHub
• URL: https://github.com/keske/react-loading-order-with-animation
• Owner: keske
• Created: 2015-12-29T12:34:21.000Z (about 9 years ago)
• Default Branch: development
• Last Pushed: 2018-01-22T18:33:58.000Z (about 7 years ago)
• Last Synced: 2024-11-14T10:10:49.165Z (3 months ago)
• Topics: animation, order, react, reactjs
• Language: JavaScript
• Homepage: http://keske.github.io/react-loading-order-with-animation/
• Size: 1.15 MB
• Stars: 6
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Loading Order With Animation

Animate components in order.

## Installation

`npm install react-loading-order-with-animation`

## Usage

`import LoadingOrderAnimation from 'react-loading-order-with-animation';`

```javascript

  


    Children component

  


```

### Props

- `animation` _(String)_ - effect, values: `fade-in`, default: `fade-in`

- `move` _(String)_ - direction, values: `from-top-to-bottom`, `from-bottom-to-top`, `from-left-to-right`, `from-right-to-left`, default: `none`

- `distance` _(Number)_ - direction distance in px, default: `0`

- `speed` _(Number)_ - animation speed in ms, default: `700`

- `wait` _(Number)_ - wait before animation, after, default: `100`

- `block` _(String)_ - css style, values: `inline`, `block`, default: `block`

## Development

```

$ npm install

```

## Run app

```

$ npm start

```

And open in browser: [http://localhost:4000](http://localhost:4000)

## Build

```

$ npm run build

```