scrollxui

Thunder Loader

Component

About

An animated thunderbolt-shaped SVG loading spinner with glow, shimmer and fill effects, plus configurable sizes and color variants.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Thunder Loader to your project and fits it to your theme.

Code

How Thunder Loader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function ThunderLoaderDemo() {
  return (
    <div className="flex w-full h-screen items-center justify-center bg-background">
      <ThunderLoader className="w-40 h-40" animate="thunder" showGlow />
    </div>
  );
}

Dependencies

More by scrollxui

View all
  • Contact with Globe

    Contact with Globe

    311
  • Features With Panel

    Features With Panel

    265
  • Logo Cloud Marquee

    Logo Cloud Marquee

    148
  • Hero Section with Cards

    Hero Section with Cards

    128
  • FAQ Accordion

    FAQ Accordion

    122
  • Particles

    Particles

    98
  • Hero With Pixel Background

    Hero With Pixel Background

    77
  • Testimonials Marquee

    Testimonials Marquee

    60