React Pure Loading

React Pure Loading is a lightweight library of loading animations made with pure CSS. These loaders are perfect for performance-focused applications and can be customized with different sizes and colors to fit your design needs.

Current Version

• Version: 1.0.4

Installation

Install the package with npm:

npm install react-pure-loading

Peer Dependencies

Make sure you have the following dependencies installed in your project:

• react ^18.0.0
• react-dom ^18.0.0

Usage

Import the loaders into your React application:

import{Dots,Bounce,Wave,Ring,Square,Pulse,Spinner,Progress,Bars,}from"react-pure-loading";functionApp(){return(<><Dotssize="medium"color="#474bff"/><Bouncesize="large"color="#00ff00"/><Wavesize="medium"color="#474bff"/><Ringsize="large"color="black"/><Squaresize="small"color="#ff6347"/><Pulsesize="large"color="#bada55"/><Spinnersize="medium"color="black"/><Progresssize="large"color="#00ff00"/><Barssize="medium"color="#474bff"/></>);}exportdefaultApp;

Loaders

Each loader has a unique style to fit different loading animations. Here’s a list of the available loaders:

• Dots: Small dots pulsing in sequence.
• Bounce: Circles bouncing in a line.
• Wave: Bars creating a wave animation.
• Ring: Spinning ring.
• Square: Square that jumps up and down.
• Pulse: Single dot that expands and fades.
• Spinner: Classic spinner animation.
• Progress: Bar filling up over time.
• Bars: Bars moving up and down.

Props

Each loader accepts these props:

• size (optional): Choose small, medium, or large to change the loader size. Default is medium.
• color (optional): Set any color in HEX or RGB format. Default is #474bff.

Examples

Here’s how to use different loaders with custom colors and sizes:

<Wavesize="small"color="#ff6347"/><Ringsize="large"color="#000"/><Pulsesize="medium"color="#bada55"/>

License

This project is licensed under the MIT License.