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

Prop	Type	Default	Description
size	number	40	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader
thickness	number	4	Thickness of the circle
speed	number	1	Animation speed (1 is normal, 2 is twice as fast)

PulseLoader

Prop	Type	Default	Description
size	number	40	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader

SpinnerLoader

Prop	Type	Default	Description
size	number	40	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader

DotLoader

Prop	Type	Default	Description
size	number	40	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader

RingLoader

Prop	Type	Default	Description
size	number	40	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader

WaveLoader

Prop	Type	Default	Description
size	number	40	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader

BounceLoader

Prop	Type	Default	Description
size	number	40	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader

SquareLoader

Prop	Type	Default	Description
size	number	40	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader

HeartbeatLoader

Prop	Type	Default	Description
size	number	40	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader

OrbitLoader

Prop	Type	Default	Description
size	number	40	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader

GlowLoader

Prop	Type	Default	Description
size	number	40	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader

FullScreenLoader

Prop	Type	Default	Description
loaderType	string	'circle'	Type of loader to display ('circle', 'pulse', 'spinner', 'dot')
size	number	60	Size of the loader in pixels
color	string	'#61dafb'	Color of the loader
thickness	number	-	Thickness of the loader (for applicable types)
speed	number	-	Animation speed (for applicable types)
backgroundColor	string	'rgba(0, 0, 0, 0.5)'	Background color of the full-screen overlay
isLoading	boolean	true	Whether to display the loader

License

ISC License

Contributing

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