React component for loading animations Sample in 2020

React component for loading animations Sample in 2020


tutorials -

react-loading

Easy to use loading animations for React projects. Uses SVG animations from Brent Jackson's loading project.

Installation

npm i react-loading

or

yarn add react-loading

Loading Types

  • blank
  • balls
  • bars
  • bubbles
  • cubes
  • cylon
  • spin
  • spinningBubbles
  • spokes

Examples

import React from 'react';
import ReactLoading from 'react-loading';

const Example = ({ type, color }) => (
	<ReactLoading type={type} color={color} height={667} width={375} />
);

export default Example;
import React from 'react';
import ReactLoading from 'react-loading';

const Example = ({ type, color }) => (
	<ReactLoading type={type} color={color} height={'20%'} width={'20%'} />
);

export default Example;

Props

Name Type Default Value
type String balls
color String #ffffff
delay Number 0 (msecs)
height Number or String 64 (px)
width Number or String 64 (px)
className String ''

GitHub

Trending On Tutorial Stuff

Our Sponsors

Top Applications in Tutorial Stuff

Top Experts In Tutorial Stuff