Bars Loader

1
import { cva, type VariantProps } from "class-variance-authority";
2
import type { ComponentProps } from "react";
3

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

6
const barsLoaderVariants = cva("flex size-full box-border", {
7
  variants: {
8
    border: {
9
      default: "pixel-border p-[calc(var(--pixel-size)*2)]",
10
      none: "",
11
    },
12
    variant: {
13
      default:
14
        "bg-background pixel-color-foreground *:data-[slot=bar]:bg-foreground",
15
      primary:
16
        "bg-primary pixel-color-primary-foreground *:data-[slot=bar]:bg-primary-foreground",
17
      secondary:
18
        "bg-secondary pixel-color-secondary-foreground *:data-[slot=bar]:bg-secondary-foreground",
19
      info: "bg-info pixel-color-info-foreground *:data-[slot=bar]:bg-info-foreground",
20
      danger:
21
        "bg-danger pixel-color-danger-foreground *:data-[slot=bar]:bg-danger-foreground",
22
      warning:
23
        "bg-warning pixel-color-warning-foreground *:data-[slot=bar]:bg-warning-foreground",
24
      success:
25
        "bg-success pixel-color-success-foreground *:data-[slot=bar]:bg-success-foreground",
26
      muted:
27
        "bg-muted pixel-color-muted-foreground *:data-[slot=bar]:bg-muted-foreground",
28
    },
29
    size: {
30
      default: "h-8 gap-1",
31
      "4xs": "h-2.5 gap-0.5",
32
      "3xs": "h-3 gap-0.5",
33
      "2xs": "h-4 gap-0.5",
34
      xs: "h-6 gap-1",
35
      sm: "h-7 gap-1",
36
      md: "h-8 gap-1",
37
      lg: "h-9 gap-1.5",
38
    },
39
  },
40
  defaultVariants: {
41
    border: "default",
42
    size: "default",
43
    variant: "default",
44
  },
45
});
46

47
function BarsLoader({
48
  bars = 9,
49
  border = "default",
50
  className,
51
  size = "default",
52
  variant = "default",
53
  ...props
54
}: ComponentProps<"div"> &
55
  VariantProps<typeof barsLoaderVariants> & {
56
    /** Number of bars. Default 9 */
57
    bars?: number;
58
  }) {
59
  return (
60
    <div
61
      className={cn(barsLoaderVariants({ border, size, variant }), className)}
62
      {...props}
63
    >
64
      <style>{`@keyframes bars-fill {
65
        0%, 100% {
66
          opacity: 0.2;
67
        }
68

69
        50% {
70
          opacity: 1;
71
        }
72
      }`}</style>
73
      {Array.from({ length: bars }).map((_, index) => (
74
        <div
75
          data-slot="bar"
76
          key={index.toString()}
77
          className="min-w-0 flex-1 basis-0 animate-[bars-fill_1s_ease-in-out_infinite]"
78
          style={{ animationDelay: `${index * 0.08}s` }}
79
        />
80
      ))}
81
    </div>
82
  );
83
}
84

85
export { BarsLoader };