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 unmatched visual appeal..
To start using:
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="" /><Mosaic color="#32cd32" size="medium" text="" textColor="" /><ThreeDot color="#32cd32" size="medium" text="" textColor="" /><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="" />Animating Indicator colors
A loading indicator can transition between different colors in each frame. This can transform mundane wait times/splash screens into an intriguing and captivating experience — keeping users' attention.
To enable this effect, simply pass an array of colors via the color prop. The indicator will cycle through each, seamlessly animating across every frame.
An interactive example on how to achieve this:
Change Loading Indicator
<ThreeDot color={["#32cd32", "#327fcd", "#cd32cd", "#cd8032"]} />💡️ 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" />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 💙️
