Rain Loader

Four bars drop in one by one with staggered delay, hold together at the base, then fall away in sequence — a smooth, satisfying loop. Ideal for card, image, and section skeleton loaders.

Color Variants

Cyan

Pink

Green

White

Orange

Size Variants

xs

sm

md

lg

xl

Glow Intensity

none

low

medium

high

Bar Count

2 bars

3 bars

4 bars

6 bars

Speed (duration)

Fast — 900ms

Default — 1600ms

Slow — 2800ms

Use-case — Card Skeleton Loader

Loading image…

Fetching data…

Rendering chart…

Props Configuration

Prop	Type	Default	Description
`color`	`"cyan" \| "pink" \| "green" \| "white" \| "orange" \| string`	`"cyan"`	Bar accent color. Use a preset name for a NeonBlade color or any valid CSS color value (e.g. "#ff4400").
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| number`	`"md"`	Height of each bar in pixels, or a size preset. xs=24, sm=36, md=52, lg=72, xl=96. Pass a number for exact pixel control.
`duration`	`number`	`1600`	Full animation cycle duration in milliseconds. Lower values = faster rain, higher values = slower and more relaxed.
`barCount`	`number`	`4`	Number of bars (clamped to 2–8). Stagger delay adjusts automatically.
`barWidthRatio`	`number`	`0.115`	Bar width as a fraction of the bar height (e.g. 0.1 = 10% of height). Controls how thick or thin the bars appear.
`gap`	`number`	`auto`	Pixel gap between bars. Defaults to ~70% of bar width if not specified.
`borderRadius`	`number`	`auto`	Corner radius of each bar in pixels. Defaults to ~35% of bar width for a slightly rounded look.
`glowIntensity`	`"none" \| "low" \| "medium" \| "high"`	`"medium"`	Neon drop-shadow glow around the bars. Set to none to disable.
`className`	`string`	`""`	Extra class names applied to the outer wrapper div.

Components

Rain Loader

Props Configuration