openstatus.dev
Openstatus
www.openstatus.dev
1import { cva } from "class-variance-authority";
2import type { VariantProps } from "class-variance-authority";
3
4import { cn } from "@/lib/utils";
5
6const loadingVariants = cva(
7 "animate-pulse rounded-full direction-alternate duration-700",
8 {
9 variants: {
10 variant: {
11 // we might want to inverse both styles
12 default: "bg-primary-foreground",
13 inverse: "bg-primary",
14 },
15 size: {
16 default: "h-1 w-1",
17 lg: "h-1.5 w-1.5",
18 },
19 },
20 defaultVariants: {
21 variant: "default",
22 size: "default",
23 },
24 },
25);
26
27interface Props
28 extends React.ComponentProps<"div">,
29 VariantProps<typeof loadingVariants> {}
30
31export function LoadingAnimation({
32 className,
33 variant,
34 size,
35 ...props
36}: Props) {
37 return (
38 <div
39 className={cn("flex items-center justify-center gap-1", className)}
40 {...props}
41 >
42 <div className={cn(loadingVariants({ variant, size }))} />
43 <div className={cn(loadingVariants({ variant, size }), "delay-150")} />
44 <div className={cn(loadingVariants({ variant, size }), "delay-300")} />
45 </div>
46 );
47}