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

Option	Description	Type	Default
type	Have five type of animate, expect accpect beat, bar, creeping, circle, orbiting.	string	beat
fill	Main color about animate element.	string	#4b9cdb
zIndex	Will be set z-index of CSS on animate wrapp.	number	10

Options Of Specialty Animate Type

beat

Option	Description	Type	Default
diameter	Each circle size of diameter.	number	15
gap	Gap of each circle	number	4

bar

Option	Description	Type	Default
width	Each element size of width.	number	15
gap	Gap of each element	number	4

creeping

Option	Description	Type	Default
height	Each element size of height.	number	15
gap	Gap of each element	number	4

circle

Option	Description	Type	Default
diameter	The circle size of diameter.	number	15

orbiting

Option	Description	Type	Default
diameter	The ring size of diameter.	number	15