Bars Spinner

A loading spinner with rotating bars animation. Renders a circular animation of bars that rotate and fade. Use when indicating a loading state in a user interface.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/bars-spinner

npx layro-cli add @xxtomm/bars-spinner

npx layro-cli add @xxtomm/bars-spinner

bunx layro-cli add @xxtomm/bars-spinner

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

interface BarsSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
  size?: number;
  color?: string;
}

export const BarsSpinner = React.forwardRef<HTMLDivElement, BarsSpinnerProps>(
  ({ className, size = 20, color = "currentColor", ...props }, ref) => {
    const bars = Array(12).fill(0);