react-ui-loaders v1.0.5

React UI Loaders

A collection of customizable loading animations for React applications.

Installation

Using npm:

npm install react-ui-loaders

Using yarn:

yarn add react-ui-loaders

Available Loaders

1. CircleLoader
2. PulseLoader
3. SpinnerLoader
4. DotLoader
5. RingLoader
6. WaveLoader
7. BounceLoader
8. SquareLoader
9. HeartbeatLoader
10. OrbitLoader
11. GlowLoader
12. FullScreenLoader

Usage

Basic Loaders

Import the desired loader component and use it in your React component:

1. Import the loader

import {
    CircleLoader,
    PulseLoader,
    SpinnerLoader,
    DotLoader,
	RingLoader,
    WaveLoader,
    BounceLoader,
    SquareLoader
    HeartbeatLoader,
    OrbitLoader,
    GlowLoader
} from "react-ui-loaders";

2. Add the loader to your JSX

CircleLoader

<CircleLoader size={80} color="#cba6f7" thickness={4} speed={1} />

PulseLoader

<PulseLoader size={80} color="#cba6f7" />

SpinnerLoader

<SpinnerLoader size={80} color="#cba6f7" />

DotLoader

<DotLoader size={80} color="#cba6f7" />

RingLoader

<RingLoader size={80} color="#cba6f7" />

WaveLoader

<WaveLoader size={80} color="#cba6f7" />

BounceLoader

<BounceLoader size={80} color="#cba6f7" />

SquareLoader

<SquareLoader size={80} color="#cba6f7" />

HeartbeatLoader

<HeartbeatLoader size={80} color="#cba6f7" />

OrbitLoader

<OrbitLoader size={80} color="#cba6f7" />

GlowLoader

<GlowLoader size={80} color="#cba6f7" />

3. Customize with props as needed

FullScreenLoader

The FullScreenLoader component creates a full-screen overlay with the selected loader centered on the screen:

1. Import the FullScreenLoader

import { FullScreenLoader } from "react-ui-loaders";

2. Use state to control the loader's visibility
3. Add the FullScreenLoader to your JSX, conditionally rendered based on the loading state

function MyComponent() {
    const [isLoading, setIsLoading] = useState(false);
    return (
        <div>
            {isLoading && (
                <FullScreenLoader
                    loaderType="spinner"
                    size={80}
                    color="#ffffff"
                    backgroundColor="rgba(0, 0, 0, 0.7)"
                    isLoading={isLoading}
                />
            )}
            <button onClick={() => setIsLoading(!isLoading)}>
                Toggle Loader
            </button>
        </div>
    );
}

4. Customize with props as needed

API

CircleLoader

PulseLoader

SpinnerLoader

DotLoader

RingLoader

WaveLoader

BounceLoader

SquareLoader

HeartbeatLoader

OrbitLoader

GlowLoader

FullScreenLoader

License

ISC License

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.