react-loading-order-with-animation

React Loading Order With Animation

Usage no npm install needed!

<script type="module">
  import reactLoadingOrderWithAnimation from 'https://cdn.skypack.dev/react-loading-order-with-animation';
</script>

README

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