react-loading-animate v1.0.8

react-loading-animate

A simple animate for loading with React component.

In this React library, All of animate style and design create by this pen, thank Manoz!

Installation

Install from npm:

npm install react-loading-animate --save

Import in your project:

import Loading from 'react-loading-animate';
// Be sure to include styles at during use react-loading-animate.
import 'react-loading-animate/dist/main.css';

Usage

react-loading-animate is easy to generate animate for loading with React component.

Basic Usage

Code

import React, { useState } from 'react';
import Loading from 'react-loading-animate';
import 'react-loading-animate/dist/main.css';

const App = () => {
  const [isLoading, setIsLading] = useState(false);
  const loading = () => {
    setIsLading(true);
    setTimeout(() => { setIsLading(false); }, 3000);
  };
  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        background: '#000',
      }}
    >
      <button type="button" onClick={loading}>Start loading!</button>
      {isLoading ? <Loading /> : null}
    </div>
  );
};

Other type of animate

Basic Options

Options Of Specialty Animate Type

beat

bar

creeping

circle

orbiting