Thunder Loader

Animated thunderbolt loader with glow and shimmer effects, customizable sizes and colors.

Installation

npx shadcn@latest add @scrollxui/thunder-loader

import { ThunderLoader } from '@/components/ui/thunder-loader';

<ThunderLoader className='w-40 h-40' />

Animated thunderbolt loader with glow and shimmer effects, customizable sizes and colors.

Property	Type	Default	Description
`size`	"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"	`"md"`	Controls the size of the loader.
`variant`	"default" \| "electric" \| "fire" \| "ice" \| "rainbow" \| "subtle"	`"default"`	Controls the color style of the loader.
`fillDuration`	number	`2`	Duration in seconds for the fill animation.
`glowDuration`	number	`3`	Duration in seconds for the glow animation.
`animateDuration`	number	`2`	Duration in seconds for the thunder path animation.
`showGlow`	boolean	`false`	Enables the glow effect.
`showFill`	boolean	`false`	Enables the fill animation inside the loader.
`animate`	boolean \| 'thunder'	`false`	Enables path animation; 'thunder' uses stroke dash offset animation.
`fillColor`	string	`—`	Custom color for the fill animation.
`glowColor`	string	`—`	Custom color for the glow effect.
`baseColor`	string	`—`	Custom base color of the loader stroke.
`strokeWidth`	number	`2`	Width of the loader stroke.
`viewBox`	string	`"0 0 100 80"`	Custom SVG viewBox.
`customPath`	string	`—`	Custom SVG path for the loader shape.
`className`	string	`—`	Custom class names for styling the loader.
`...props`	HTMLDivElement attributes	`—`	Supports all standard div props and events.