🔄 loading-screens

A lightweight React component library that provides beautiful and customizable loading screen animations. Perfect for enhancing the UX of your web applications.

📦 Installation

npm install loading-screens

or

yarn add loading-screens

🚀 Usage

Import the components and global styles into your app:

import 'loading-screens/dist/loading-screens.css';
import { Jumping, Box, Spinner, Coin, PulseRingLoader } from 'loading-screens';

🧩 Components & Props

1. <Jumping />

Animated jumping bars loader with optional text.

<Jumping size={40} color="#5b21b6, #3b82f6" text="Loading..." />

| Prop | Type | Default | Description | |--------|----------|----------------------|----------------------------------| | size | number | 30 | Height of each jumping bar | | color| string | "#5b21b6, #3b82f6" | Bar color or gradient | | text | string | "LOADING" | Text below the loader |

2. <Box />

Grid-style bouncing boxes loader.

<Box 
  colors={['#ff4d4d', '#ff944d', '#ffd24d', '#d2ff4d', '#4dff88']} 
  background="#1a1a1a" 
/>

| Prop | Type | Default | Description | |-------------|------------|----------------------------------------------|--------------------------------------| | colors | string[] | ["#d2afff", "#d8b9ff", ...] | List of 5 box colors | | background| string | "#242424" | Background color of the loader |

3. <Spinner />

Circular spinner using a conic-gradient.

<Spinner 
  width="70px" 
  height="70px" 
  colors={['#ff6b6b', '#feca57', '#1dd1a1']} 
  background="rgba(0, 0, 0, 0.5)" 
/>

| Prop | Type | Default | Description | |-------------|------------|------------------------------------|-----------------------------------| | width | string | "50px" | Width of the spinner | | height | string | "50px" | Height of the spinner | | colors | string[] | undefined | Gradient colors | | background| string | "rgba(36, 36, 36, 0.6)" | Overlay background color |

4. <Coin />

Animated coin flip loader with a progress bar and branding text.

<Coin 
  text="SpendWise" 
  backgroundColor="#1a1a1a" 
  textColor="#00ffc8" 
/>

| Prop | Type | Default | Description | |------------------|----------|---------------|------------------------------| | text | string | " " | Branding or logo text | | backgroundColor| string | "#f8f9fa" | Background color | | textColor | string | "#2c3e50" | Color of the text |

5. <PulseRingLoader />

Full-screen circular pulse spinner with fading bars.

<PulseRingLoader 
  color="#00e5ff" 
  size={80} 
  speed={1.2} 
  className="my-custom-loader" 
/>

| Prop | Type | Default | Description | |-------------|----------|---------------|--------------------------------------| | color | string | "#3b82f6" | Bar color | | size | number | 40 | Diameter of the ring | | speed | number | 1.2 | Duration of one animation cycle (s) | | className | string | "" | Extra class for styling |

🧼 Styling

Global styles must be imported once in your root component or index.js:

import 'loading-screens/dist/loading-screens.css';