Loader

1"use client"
2 
3import { cn } from "@/lib/utils"
4import React from "react"
5 
6export interface LoaderProps {
7  variant?:
8    | "circular"
9    | "classic"
10    | "pulse"
11    | "pulse-dot"
12    | "dots"
13    | "typing"
14    | "wave"
15    | "bars"
16    | "terminal"
17    | "text-blink"
18    | "text-shimmer"
19    | "loading-dots"
20  size?: "sm" | "md" | "lg"
21  text?: string
22  className?: string
23}
24 
25export function CircularLoader({
26  className,
27  size = "md",
28}: {
29  className?: string
30  size?: "sm" | "md" | "lg"
31}) {
32  const sizeClasses = {
33    sm: "size-4",
34    md: "size-5",
35    lg: "size-6",
36  }
37 
38  return (
39    <div
40      className={cn(
41        "border-primary animate-spin rounded-full border-2 border-t-transparent",
42        sizeClasses[size],
43        className
44      )}
45    >
46      <span className="sr-only">Loading</span>
47    </div>
48  )
49}
50 
51export function ClassicLoader({
52  className,
53  size = "md",
54}: {
55  className?: string
56  size?: "sm" | "md" | "lg"
57}) {
58  const sizeClasses = {
59    sm: "size-4",
60    md: "size-5",
61    lg: "size-6",
62  }
63 
64  const barSizes = {
65    sm: { height: "6px", width: "1.5px" },
66    md: { height: "8px", width: "2px" },
67    lg: { height: "10px", width: "2.5px" },
68  }
69 
70  return (
71    <div className={cn("relative", sizeClasses[size], className)}>
72      <div className="absolute h-full w-full">
73        {[...Array(12)].map((_, i) => (
74          <div
75            key={i}
76            className="bg-primary absolute animate-[spinner-fade_1.2s_linear_infinite] rounded-full"
77            style={{
78              top: "0",
79              left: "50%",
80              marginLeft:
81                size === "sm" ? "-0.75px" : size === "lg" ? "-1.25px" : "-1px",
82              transformOrigin: `${size === "sm" ? "0.75px" : size === "lg" ? "1.25px" : "1px"} ${size === "sm" ? "10px" : size === "lg" ? "14px" : "12px"}`,
83              transform: `rotate(${i * 30}deg)`,
84              opacity: 0,
85              animationDelay: `${i * 0.1}s`,
86              height: barSizes[size].height,
87              width: barSizes[size].width,
88            }}
89          />
90        ))}
91      </div>
92      <span className="sr-only">Loading</span>
93    </div>
94  )
95}
96 
97export function PulseLoader({
98  className,
99  size = "md",
100}: {
101  className?: string
102  size?: "sm" | "md" | "lg"
103}) {
104  const sizeClasses = {
105    sm: "size-4",
106    md: "size-5",
107    lg: "size-6",
108  }
109 
110  return (
111    <div className={cn("relative", sizeClasses[size], className)}>
112// … truncated