If you cannot rid the loading time, then you should make the wait more pleasant to users. React Loading Indicators is here to ensure you excel at that.
With high customizability and elegance✨, your apps and splash screens should emit pleasantries and good vibes..

To start using:

npm install react-loading-indicators

Features

🪶️ Light weight
🥣️ Ready-made loading components with good defaults
🔧️ Customizable to fit into your needs
🥢 Same API for all components
🍃️ Tree-shakeable
🙅‍♀️️ No css import required
✅️ Perfomant animations
🚢️ Ships with Typescript declarations
🏗️ Light build available

Components

Use the button controls to customize the components

<Atom color="#32cd32" size="medium" text="" textColor="" />

<OrbitProgress color="#32cd32" size="medium" text="" textColor="" />

Choose Variant

Default

Dense

falsetrue

<Mosaic color="#32cd32" size="medium" text="" textColor="" />

<ThreeDot color="#32cd32" size="medium" text="" textColor="" />

Choose Variant

Default

<BlinkBlur color="#32cd32" size="medium" text="" textColor="" />

<Commet color="#32cd32" size="medium" text="" textColor="" />

<FourSquare color="#32cd32" size="medium" text="" textColor="" />

<LifeLine color="#32cd32" size="medium" text="" textColor="" />

<Riple color="#32cd32" size="medium" text="" textColor="" />

<Slab color="#32cd32" size="medium" text="" textColor="" />

<TrophySpin color="#32cd32" size="medium" text="" textColor="" />

Color animation

A loading indicator can change colors. Flashing colors is one way to entice waiting users.
To make an indicator change between colors, pass an array of colors via the color prop. And each color will be applied per frame.

An example result would look like this:

<Mosaic color={["#33CCCC", "#33CC36", "#B8CC33", "#FCCA00"]} />

💡️ Hear this:
Maximum number of colors played for an indicator is 4. Therefore color array longer than this limit will be truncated to the first four. Otherwise any length of colors is accepted.

Increase/decrease speed

Animation can be too slow or too fast for your preferences. You can alter the speed of the animation using a speedPlus prop.
A fixed range of value is accepted, i.e an integer ranging from -5 through 5. 0 value means normal speed. Greater number means higher speed. Smaller number means slower speed. And number out of range means normal speed.

See Example:

Use the slider to adjust animation speed

<OrbitProgress variant="track-disc" speedPlus="0" easing="linear" />

Choose easing

Linear

As shown above, you can as well pass an easing prop to control motion "ease/smoothness" of an animation.
It accepts values of CSS easing function passed as a string.

Before you go 💙️

on Github