A kit of elegant loading indicators to enhance waiting experience of users when your system has something to do in the background for a while.

Built with Typescript. Type safety and improved DX guaranteed.

A glimpse of what is wrapped 🎁.
See DEMO page.

npm install react-loading-indicators

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

import { Atom } from "react-loading-indicators";
/* 
| OR directly 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 kept at fairly small. You have an option to even shrink further what you include from this library.
You can directly pull a loading indicator you want:

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 to the loading indicator. This will style the outer element that wraps an 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. 0 is normal speed.
• easing - Controls the smoothness of the animation, altered with values such as linear, ease-in.

<OrbitProgress /> and <ThreeDot /> have more than one variant of loading animation. You can pick an alternative animation using a variant prop.

<OrbitProgress /> supports the following variants: dotted, spokes, disc, split-disc, track-disc. Defaults to disc.
<ThreeDot /> has the following variants: pulsate, bounce, bob, brick-stack. Defaults to pulsate.
You can have an interactive run-through of the variants in the DEMO site.

You can resize a loading indicator to fit into your needs with the size prop that accepts predefined string values.
For more size customization, you can specify a fontSize property in the style prop. A valid value for the fontSize property will evenly alter the animation's size, for example:

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

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

@smitterhane