SCG UI
Halo-Loader16

Halo Loader

A mesmerizing animated loading spinner with customizable gradient effects and smooth rotation animations. Perfect for adding elegant loading states to your applications with a beautiful halo-like appearance that captivates users while content loads.

Install dependencies

npm i clsx tailwind-merge motion

Add utility file

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Code

HaloLoader.tsx

import { cn } from "@/lib/utils";

interface LoaderProps {
  size?: number; // in pixels
  className?: string;
  colorClass?: string; // Tailwind color class for customization
  speed?: string; // Tailwind animation speed like 'duration-1000'
}

export default function HaloLoader({
  size = 40,
  className,
  colorClass = "border-l-amber-100 shadow-amber-100",
  speed = "duration-1000",
}: LoaderProps) {
  return (
    <div
      className={cn(
        "relative cursor-pointer",
        className
      )}
      style={{ width: size, height: size }}
    >
      <div className="rounded-full w-full h-full">
        <div
          className={cn(
            "absolute inset-0 rounded-full bg-gradient-to-b from-[#020617] to-[#e2e8f0]/10 border-r-4 border-zinc-700 animate-spin border-l-2 shadow-md",
            colorClass,
            speed
          )}
        />
      </div>
    </div>
  );
}

Props

PropTypeDefaultDescription
sizenumber40Size of the loader in pixels
classNamestringundefinedAdditional CSS classes for styling
colorClassstring"border-l-amber-100 shadow-amber-100"Tailwind color classes for customization
speedstring"duration-1000"Animation speed using Tailwind duration classes
Halo-Loader16