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.

• Version: 1.0.4

Install the package with npm:

npm install react-pure-loading

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

• react ^18.0.0
• react-dom ^18.0.0

Import the loaders into your React application:

import {
  Dots,
  Bounce,
  Wave,
  Ring,
  Square,
  Pulse,
  Spinner,
  Progress,
  Bars,
} from "react-pure-loading";

function App() {
  return (
    <>
      <Dots size="medium" color="#474bff" />
      <Bounce size="large" color="#00ff00" />
      <Wave size="medium" color="#474bff" />
      <Ring size="large" color="black" />
      <Square size="small" color="#ff6347" />
      <Pulse size="large" color="#bada55" />
      <Spinner size="medium" color="black" />
      <Progress size="large" color="#00ff00" />
      <Bars size="medium" color="#474bff" />
    </>
  );
}

export default App;

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.

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.

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

<Wave size="small" color="#ff6347" />
<Ring size="large" color="#000" />
<Pulse size="medium" color="#bada55" />

This project is licensed under the MIT License.