A library of well done and highly usable loading indicators to inform users that the system is working.

Built with Typescript. Compatible with react version >=16.8.0(since hooks).

A glimpse of what is wrapped🎁.
See DEMO.

npm install react-loading-indicators

<Atom />
<Commet />
<OrbitProgress />
<GlidingBlink />
<FourSquare />
<TrophySpin />
<ThreeDot />
<LifeLine />
<Mosaic />
<Riple />
<Slab />

Heads Up 📢

The following components were renamed:

• <CircularProgress /> - <OrbitProgress />
• <Seek /> - <ThreeDot />
• <GlidingBlink /> - <BlinkBlur />
• <Twist /> - <TrophySpin />
• <Pulse /> - <LifeLine />

import React from "react";
import { Atom } from "react-loading-indicators";
/* 
| OR specifically pull it 😊️
| import Atom from "react-loading-indicators/Atom";
*/

const Loading = () => <Atom text="Loading..." />;

export default Loading;

<Suspense fallback={<Loading />}>
	<Albums artistId={artist.id} />
</Suspense>

This library is fairly small. However, you might be aiming at making the bundle size of your project to be as small as possible.
You can only include a specific loading indicator you want to use:

import React from "react";
import OrbitProgress from "react-loading-indicators/OrbitProgress";

const Loading = () => (
	<OrbitProgress variant="track-disc" color="crimson" size="small" />
);

export default Loading;

Each of these components will accept the following optional props.

• size - Sets the size of the loading indicator.
• color - Sets the color of the loading indicator.
• style - Applies CSS styles to the loading indicator
• text - Displays message in the loading indicator.
• textColor - Sets the color of text message in the loading indicator.
• speedPlus - Controls speed of animation. Negative values slows down. Positive numbers speeds up animation.
• easing - Controls the smoothness of the animation, altered with values such as linear, ease-in.

Some components accept a variant prop, Specifically <OrbitProgress /> and <ThreeDot />. This lets you choose a variation of a loading indicator that you want.

See DEMO to know list of variants a loading indicator supports.

You can resize loader to fit into your needs with the size prop that accepts predefined string input.
If this is not enough, you can give a loading indicator a fontSize property via the style prop. The style prop is an object that allows you to add your own css. Including fontSize in the style object will evenly alter the animation's size, e.g

const Loading = () => <ThreeDot style={{ fontSize: "8px" }} />;

Distributed under the MIT License. See LICENSE for more information.

@smitterhane