Bars Spinner

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface BarsSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
7  size?: number;
8  color?: string;
9}
10 
11export const BarsSpinner = React.forwardRef<HTMLDivElement, BarsSpinnerProps>(
12  ({ className, size = 20, color = "currentColor", ...props }, ref) => {
13    const bars = Array(12).fill(0);
14 
15    return (
16      <div
17        ref={ref}
18        className={cn("wrapper", className)}
19        style={{
20          ["--spinner-size" as string]: `${size}px`,
21          ["--spinner-color" as string]: color,
22        }}
23        {...props}
24      >
25        <div className="spinner">
26          {bars.map((_, i) => (
27            <div className="bar" key={`spinner-bar-${i}`} />
28          ))}
29        </div>
30        <style jsx>{`
31          .wrapper {
32            height: var(--spinner-size, 20px);
33            width: var(--spinner-size, 20px);
34          }
35 
36          .spinner {
37            position: relative;
38            top: 50%;
39            left: 50%;
40            height: var(--spinner-size, 20px);
41            width: var(--spinner-size, 20px);
42          }
43 
44          .bar {
45            animation: spin 1.2s linear infinite;
46            background: var(--spinner-color);
47            border-radius: 6px;
48            height: 8%;
49            left: -10%;
50            position: absolute;
51            top: -3.9%;
52            width: 24%;
53          }
54 
55          .bar:nth-child(1) {
56            animation-delay: -1.2s;
57            transform: rotate(0.0001deg) translate(146%);
58          }
59 
60          .bar:nth-child(2) {
61            animation-delay: -1.1s;
62            transform: rotate(30deg) translate(146%);
63          }
64 
65          .bar:nth-child(3) {
66            animation-delay: -1s;
67            transform: rotate(60deg) translate(146%);
68          }
69 
70          .bar:nth-child(4) {
71            animation-delay: -0.9s;
72            transform: rotate(90deg) translate(146%);
73          }
74 
75          .bar:nth-child(5) {
76            animation-delay: -0.8s;
77            transform: rotate(120deg) translate(146%);
78          }
79 
80          .bar:nth-child(6) {
81            animation-delay: -0.7s;
82            transform: rotate(150deg) translate(146%);
83          }
84 
85          .bar:nth-child(7) {
86            animation-delay: -0.6s;
87            transform: rotate(180deg) translate(146%);
88          }
89 
90          .bar:nth-child(8) {
91            animation-delay: -0.5s;
92            transform: rotate(210deg) translate(146%);
93          }
94 
95// … truncated