"use client";

import { cn } from "@/lib/utils";
import React, { useEffect } from "react";

export interface LoaderProps {
  className?: string;
  variant?:
    | "circular"
    | "classic"
    | "waveform"
    | "dot-stream"
    | "dot-stream-blur"
    | "circular-tail"
    | "atom";
  size?: "sm" | "md" | "lg";
}

export function CircularLdr({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeClasses = {
    sm: "size-4",
    md: "size-5",
    lg: "size-6",
  };

  return (
    <div
      className={cn(
        "border-primary animate-spin rounded-full border-2 border-t-transparent",
        sizeClasses[size],
        className
      )}
    >
      <span className="sr-only">Loading...</span>
    </div>
  );
}

const sizeClasses = {
  sm: "size-5",
  md: "size-6",
  lg: "size-7",
};

const lineCount = 12;

const spinnerStroke = {
  sm: 2,
  md: 3,
  lg: 4,
};

function LineSpinner({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const stroke = spinnerStroke[size];
  const color = "currentColor";
  const speed = 1; // seconds

  return (
    <div
      className={cn(
        "relative flex items-center justify-start",
        sizeClasses[size],
        className
      )}
      //   style={{
      //     height: spinnerSize,
      //     width: spinnerSize,
      //   }}
    >
      {Array.from({ length: lineCount }).map((_, i) => (
        <div
          key={i}
          className="absolute top-0 left-1/2 flex items-start"
          style={{
            height: "100%",
            width: stroke,
            transform: `rotate(${
              (360 / lineCount) * -(i + 1)
            }deg) translateX(-50%)`,
          }}
        >
          <span
            className="block"
            style={{
              height: "22%",
              width: "100%",
              borderRadius: stroke / 2,
              backgroundColor: color,
              animation: `linespinner-pulse ${speed}s ease-in-out infinite`,
              animationDelay: `${(speed / -lineCount) * (i + 1)}s`,
              transition: "background-color 0.3s ease",
              transformOrigin: "center bottom",
              display: "block",
            }}
          />
        </div>
      ))}
      <span className="sr-only">Loading...</span>
      <style jsx>{`
        @keyframes linespinner-pulse {
          0%,
          80%,
          100% {
            transform: scaleY(0.75);
            opacity: 0;
          }
          20% {
            transform: scaleY(1);
            opacity: 1;
          }
        }
      `}</style>
    </div>
  );
}

function WaveformLoader({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeMap = {
    sm: { w: "w-6", h: "h-4", bar: "w-0.5" },
    md: { w: "w-5", h: "h-6", bar: "w-0.5" },
    lg: { w: "w-7", h: "h-7", bar: "w-0.75" },
  };
  const { w, h, bar } = sizeMap[size];
  const speed = 1; // seconds

  return (
    <div className={cn("flex items-center justify-between", w, h, className)}>
      {[0.45, 0.3, 0.15, 0].map((delay, i) => (
        <div
          key={i}
          className={cn("bg-current transition-colors", bar, "h-full rounded")}
          style={{
            animation: `waveform-grow ${speed}s ease-in-out ${
              speed * -delay
            }s infinite`,
          }}
        />
      ))}
      <span className="sr-only">Loading...</span>
      <style jsx>{`
        @keyframes waveform-grow {
          0%,
          100% {
            transform: scaleY(0.3);
          }
          50% {
            transform: scaleY(1);
          }
        }
      `}</style>
    </div>
  );
}

function DotStreamLoader({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeMap = {
    sm: { container: "w-10 h-4", dotSize: "w-2 h-2", containerPx: 40 },
    md: { container: "w-12 h-6", dotSize: "w-3 h-3", containerPx: 45 },
    lg: { container: "w-24 h-7", dotSize: "w-4 h-4", containerPx: 60 },
  };
  const { container, dotSize, containerPx } = sizeMap[size];
  const speed = 2.5; // seconds

  return (
    <div className={cn("relative flex items-center", container, className)}>
      {[0, 0.2, 0.4, 0.6, 0.8].map((delay, i) => (
        <div
          key={i}
          className={cn("absolute rounded-full bg-current", dotSize)}
          style={{
            top: "50%",
            left: 0,
            transform: "translate(-50%, -50%)",
            animation: `dotstream-move ${speed}s linear infinite both`,
            animationDelay: `${-speed * delay}s`,
            transition: "background-color 0.3s ease",
          }}
        />
      ))}
      <span className="sr-only">Loading...</span>
      <style jsx>{`
        @keyframes dotstream-move {
          0%,
          100% {
            transform: translateX(0) translateY(-50%) scale(0);
          }
          50% {
            transform: translateX(${containerPx * 0.5}px) translateY(-50%)
              scale(1);
          }
          99.999% {
            transform: translateX(${containerPx}px) translateY(-50%) scale(0);
          }
        }
      `}</style>
    </div>
  );
}

function DotStreamBlurLoader({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeMap = {
    sm: { container: "w-10 h-4", dotSize: "w-2 h-2", containerPx: 40 },
    md: { container: "w-12 h-6", dotSize: "w-3 h-3", containerPx: 45 },
    lg: { container: "w-24 h-7", dotSize: "w-4 h-4", containerPx: 60 },
  };
  const { container, dotSize, containerPx } = sizeMap[size];
  const speed = 2.6; // seconds
  const filterId = `uib-jelly-ooze-${Math.random().toString(36).substr(2, 9)}`;

  return (
    <>
      <svg width="0" height="0" className="absolute">
        <defs>
          <filter id={filterId}>
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
              result="ooze"
            />
            <feBlend in="SourceGraphic" in2="ooze" />
          </filter>
        </defs>
      </svg>
      <div
        className={cn("relative flex items-center", container, className)}
        style={{ filter: `url('#${filterId}')` }}
      >
        {[0, 0.2, 0.4, 0.6, 0.8].map((delay, i) => (
          <div
            key={i}
            className={cn("absolute rounded-full bg-current", dotSize)}
            style={{
              top: "50%",
              left: 0,
              transform: "translate(-50%, -50%)",
              animation: `dotstream-blur-move ${speed}s linear infinite both`,
              animationDelay: `${-speed * delay}s`,
              transition: "background-color 0.3s ease",
            }}
          />
        ))}
        <span className="sr-only">Loading...</span>
        <style jsx>{`
          @keyframes dotstream-blur-move {
            0%,
            100% {
              transform: translateX(0) translateY(-50%) scale(0);
            }
            50% {
              transform: translateX(${containerPx * 0.5}px) translateY(-50%)
                scale(1);
            }
            99.999% {
              transform: translateX(${containerPx}px) translateY(-50%) scale(0);
            }
          }
        `}</style>
      </div>
    </>
  );
}

function CircularTailLoader({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeMap = {
    sm: "w-6 h-4",
    md: "w-5 h-6",
    lg: "w-7 h-7",
  };
  return (
    <div
      className={cn(
        "inline-block rounded-full border-t-2 border-r-2 border-t-white border-r-transparent box-border",
        sizeMap[size],
        className
      )}
      style={{
        animation: "circular-tail-rotation 1s linear infinite",
      }}
    >
      <span className="sr-only">Loading...</span>
      <style jsx>{`
        @keyframes circular-tail-rotation {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      `}</style>
    </div>
  );
}

function AtomLoader({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeMap = {
    sm: "w-5 h-5",
    md: "w-6 h-6",
    lg: "w-7 h-7",
  };
  return (
    <div
      className={cn("relative", sizeMap[size], "rounded-full", className)}
      style={{
        transform: "rotateZ(45deg)",
        perspective: "1000px",
        color: "#fff",
      }}
    >
      <span className="sr-only">Loading...</span>
      <span
        className={cn("absolute top-0 left-0 w-full h-full rounded-full")}
        style={{
          transform: "rotateX(70deg)",
          animation: "atom-spin 1s linear infinite",
        }}
      />
      <span
        className={cn("absolute top-0 left-0 w-full h-full rounded-full")}
        style={{
          color: "#99ff00",
          transform: "rotateY(70deg)",
          animation: "atom-spin 1s linear infinite",
          animationDelay: ".4s",
        }}
      />
      <style jsx>{`
        @keyframes atom-spin {
          0%,
          100% {
            box-shadow: 0.2em 0px 0 0px currentcolor;
          }
          12% {
            box-shadow: 0.2em 0.2em 0 0 currentcolor;
          }
          25% {
            box-shadow: 0 0.2em 0 0px currentcolor;
          }
          37% {
            box-shadow: -0.2em 0.2em 0 0currentcolor;
          }
          50% {
            box-shadow: -0.2em 0 0 0 currentcolor;
          }
          62% {
            box-shadow: -0.2em -0.2em 0 0 currentcolor;
          }
          75% {
            box-shadow: 0px -0.2em 0 0 currentcolor;
          }
          87% {
            box-shadow: 0.2em -0.2em 0 0 currentcolor;
          }
        }
      `}</style>
    </div>
  );
}

export default function Loader({
  variant = "circular",
  size = "md",
  className,
}: LoaderProps) {
  switch (variant) {
    case "circular":
      return <CircularLdr size={size} className={className} />;
    case "classic":
      return <LineSpinner size={size} className={className} />;
    case "waveform":
      return <WaveformLoader size={size} className={className} />;
    case "dot-stream":
      return <DotStreamLoader size={size} className={className} />;
    case "dot-stream-blur":
      return <DotStreamBlurLoader size={size} className={className} />;
    case "circular-tail":
      return <CircularTailLoader size={size} className={className} />;
    case "atom":
      return <AtomLoader size={size} className={className} />;
    default:
      return <CircularLdr size={size} className={className} />;
  }
}

"use client";

import { cn } from "@/lib/utils";
import React, { useEffect } from "react";

export interface LoaderProps {
  className?: string;
  variant?:
    | "circular"
    | "classic"
    | "waveform"
    | "dot-stream"
    | "dot-stream-blur"
    | "circular-tail"
    | "atom";
  size?: "sm" | "md" | "lg";
}

export function CircularLdr({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeClasses = {
    sm: "size-4",
    md: "size-5",
    lg: "size-6",
  };

  return (
    <div
      className={cn(
        "border-primary animate-spin rounded-full border-2 border-t-transparent",
        sizeClasses[size],
        className
      )}
    >
      <span className="sr-only">Loading...</span>
    </div>
  );
}

const sizeClasses = {
  sm: "size-5",
  md: "size-6",
  lg: "size-7",
};

const lineCount = 12;

const spinnerStroke = {
  sm: 2,
  md: 3,
  lg: 4,
};

function LineSpinner({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const stroke = spinnerStroke[size];
  const color = "currentColor";
  const speed = 1; // seconds

  return (
    <div
      className={cn(
        "relative flex items-center justify-start",
        sizeClasses[size],
        className
      )}
      //   style={{
      //     height: spinnerSize,
      //     width: spinnerSize,
      //   }}
    >
      {Array.from({ length: lineCount }).map((_, i) => (
        <div
          key={i}
          className="absolute top-0 left-1/2 flex items-start"
          style={{
            height: "100%",
            width: stroke,
            transform: `rotate(${
              (360 / lineCount) * -(i + 1)
            }deg) translateX(-50%)`,
          }}
        >
          <span
            className="block"
            style={{
              height: "22%",
              width: "100%",
              borderRadius: stroke / 2,
              backgroundColor: color,
              animation: `linespinner-pulse ${speed}s ease-in-out infinite`,
              animationDelay: `${(speed / -lineCount) * (i + 1)}s`,
              transition: "background-color 0.3s ease",
              transformOrigin: "center bottom",
              display: "block",
            }}
          />
        </div>
      ))}
      <span className="sr-only">Loading...</span>
      <style jsx>{`
        @keyframes linespinner-pulse {
          0%,
          80%,
          100% {
            transform: scaleY(0.75);
            opacity: 0;
          }
          20% {
            transform: scaleY(1);
            opacity: 1;
          }
        }
      `}</style>
    </div>
  );
}

function WaveformLoader({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeMap = {
    sm: { w: "w-6", h: "h-4", bar: "w-0.5" },
    md: { w: "w-5", h: "h-6", bar: "w-0.5" },
    lg: { w: "w-7", h: "h-7", bar: "w-0.75" },
  };
  const { w, h, bar } = sizeMap[size];
  const speed = 1; // seconds

  return (
    <div className={cn("flex items-center justify-between", w, h, className)}>
      {[0.45, 0.3, 0.15, 0].map((delay, i) => (
        <div
          key={i}
          className={cn("bg-current transition-colors", bar, "h-full rounded")}
          style={{
            animation: `waveform-grow ${speed}s ease-in-out ${
              speed * -delay
            }s infinite`,
          }}
        />
      ))}
      <span className="sr-only">Loading...</span>
      <style jsx>{`
        @keyframes waveform-grow {
          0%,
          100% {
            transform: scaleY(0.3);
          }
          50% {
            transform: scaleY(1);
          }
        }
      `}</style>
    </div>
  );
}

function DotStreamLoader({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeMap = {
    sm: { container: "w-10 h-4", dotSize: "w-2 h-2", containerPx: 40 },
    md: { container: "w-12 h-6", dotSize: "w-3 h-3", containerPx: 45 },
    lg: { container: "w-24 h-7", dotSize: "w-4 h-4", containerPx: 60 },
  };
  const { container, dotSize, containerPx } = sizeMap[size];
  const speed = 2.5; // seconds

  return (
    <div className={cn("relative flex items-center", container, className)}>
      {[0, 0.2, 0.4, 0.6, 0.8].map((delay, i) => (
        <div
          key={i}
          className={cn("absolute rounded-full bg-current", dotSize)}
          style={{
            top: "50%",
            left: 0,
            transform: "translate(-50%, -50%)",
            animation: `dotstream-move ${speed}s linear infinite both`,
            animationDelay: `${-speed * delay}s`,
            transition: "background-color 0.3s ease",
          }}
        />
      ))}
      <span className="sr-only">Loading...</span>
      <style jsx>{`
        @keyframes dotstream-move {
          0%,
          100% {
            transform: translateX(0) translateY(-50%) scale(0);
          }
          50% {
            transform: translateX(${containerPx * 0.5}px) translateY(-50%)
              scale(1);
          }
          99.999% {
            transform: translateX(${containerPx}px) translateY(-50%) scale(0);
          }
        }
      `}</style>
    </div>
  );
}

function DotStreamBlurLoader({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeMap = {
    sm: { container: "w-10 h-4", dotSize: "w-2 h-2", containerPx: 40 },
    md: { container: "w-12 h-6", dotSize: "w-3 h-3", containerPx: 45 },
    lg: { container: "w-24 h-7", dotSize: "w-4 h-4", containerPx: 60 },
  };
  const { container, dotSize, containerPx } = sizeMap[size];
  const speed = 2.6; // seconds
  const filterId = `uib-jelly-ooze-${Math.random().toString(36).substr(2, 9)}`;

  return (
    <>
      <svg width="0" height="0" className="absolute">
        <defs>
          <filter id={filterId}>
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
              result="ooze"
            />
            <feBlend in="SourceGraphic" in2="ooze" />
          </filter>
        </defs>
      </svg>
      <div
        className={cn("relative flex items-center", container, className)}
        style={{ filter: `url('#${filterId}')` }}
      >
        {[0, 0.2, 0.4, 0.6, 0.8].map((delay, i) => (
          <div
            key={i}
            className={cn("absolute rounded-full bg-current", dotSize)}
            style={{
              top: "50%",
              left: 0,
              transform: "translate(-50%, -50%)",
              animation: `dotstream-blur-move ${speed}s linear infinite both`,
              animationDelay: `${-speed * delay}s`,
              transition: "background-color 0.3s ease",
            }}
          />
        ))}
        <span className="sr-only">Loading...</span>
        <style jsx>{`
          @keyframes dotstream-blur-move {
            0%,
            100% {
              transform: translateX(0) translateY(-50%) scale(0);
            }
            50% {
              transform: translateX(${containerPx * 0.5}px) translateY(-50%)
                scale(1);
            }
            99.999% {
              transform: translateX(${containerPx}px) translateY(-50%) scale(0);
            }
          }
        `}</style>
      </div>
    </>
  );
}

function CircularTailLoader({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeMap = {
    sm: "w-6 h-4",
    md: "w-5 h-6",
    lg: "w-7 h-7",
  };
  return (
    <div
      className={cn(
        "inline-block rounded-full border-t-2 border-r-2 border-t-white border-r-transparent box-border",
        sizeMap[size],
        className
      )}
      style={{
        animation: "circular-tail-rotation 1s linear infinite",
      }}
    >
      <span className="sr-only">Loading...</span>
      <style jsx>{`
        @keyframes circular-tail-rotation {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      `}</style>
    </div>
  );
}

function AtomLoader({
  className,
  size = "md",
}: {
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  const sizeMap = {
    sm: "w-5 h-5",
    md: "w-6 h-6",
    lg: "w-7 h-7",
  };
  return (
    <div
      className={cn("relative", sizeMap[size], "rounded-full", className)}
      style={{
        transform: "rotateZ(45deg)",
        perspective: "1000px",
        color: "#fff",
      }}
    >
      <span className="sr-only">Loading...</span>
      <span
        className={cn("absolute top-0 left-0 w-full h-full rounded-full")}
        style={{
          transform: "rotateX(70deg)",
          animation: "atom-spin 1s linear infinite",
        }}
      />
      <span
        className={cn("absolute top-0 left-0 w-full h-full rounded-full")}
        style={{
          color: "#99ff00",
          transform: "rotateY(70deg)",
          animation: "atom-spin 1s linear infinite",
          animationDelay: ".4s",
        }}
      />
      <style jsx>{`
        @keyframes atom-spin {
          0%,
          100% {
            box-shadow: 0.2em 0px 0 0px currentcolor;
          }
          12% {
            box-shadow: 0.2em 0.2em 0 0 currentcolor;
          }
          25% {
            box-shadow: 0 0.2em 0 0px currentcolor;
          }
          37% {
            box-shadow: -0.2em 0.2em 0 0currentcolor;
          }
          50% {
            box-shadow: -0.2em 0 0 0 currentcolor;
          }
          62% {
            box-shadow: -0.2em -0.2em 0 0 currentcolor;
          }
          75% {
            box-shadow: 0px -0.2em 0 0 currentcolor;
          }
          87% {
            box-shadow: 0.2em -0.2em 0 0 currentcolor;
          }
        }
      `}</style>
    </div>
  );
}

export default function Loader({
  variant = "circular",
  size = "md",
  className,
}: LoaderProps) {
  switch (variant) {
    case "circular":
      return <CircularLdr size={size} className={className} />;
    case "classic":
      return <LineSpinner size={size} className={className} />;
    case "waveform":
      return <WaveformLoader size={size} className={className} />;
    case "dot-stream":
      return <DotStreamLoader size={size} className={className} />;
    case "dot-stream-blur":
      return <DotStreamBlurLoader size={size} className={className} />;
    case "circular-tail":
      return <CircularTailLoader size={size} className={className} />;
    case "atom":
      return <AtomLoader size={size} className={className} />;
    default:
      return <CircularLdr size={size} className={className} />;
  }
}

Loader indicator

Install

On this page