React Loading Order With Animation

Animate components in order.

DEMO

Installation

npm install react-loading-order-with-animation

Usage

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

<LoadingOrderAnimation animation="fade-in"
                       move="from-bottom-to-top"
                       distance={30}
                       speed={1000}
                       wait={300}>
  <div>
    Children component
  </div>
</LoadingOrderAnimation>

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

Build

$ npm run build