Thunder Loader

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

Installation

npx shadcn@latest add https://scrollxui.dev/registry/thunder-loader.json

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

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

2xl

default

electric

fire

ice

rainbow

subtle

Custom Green

Custom Orange

Custom Purple

Animate

Glow

Fill

Static

Fast

Normal

Slow

Fast

Normal

Slow

Fast

Normal

Slow

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.