Bars Loader

Vertical bars that animate in a wave pattern — great for audio/data loading states.

Code

import { BarsLoader } from "@/components/ui/bars-loader"

export default function Example() {
  return <BarsLoader />
}

Installation

$npx particleui-cli add bars-loader

Usage

TSX

import { BarsLoader } from "@/components/ui/bars-loader"

export default function Example() {
  return <BarsLoader />
}

Examples

Sizes

TSX

import { BarsLoader } from "@/components/ui/bars-loader"

export default function Example() {
  return (
    <div className="flex items-center gap-8">
      <BarsLoader size="sm" />
      <BarsLoader size="md" />
      <BarsLoader size="lg" />
    </div>
  )
}

Custom bar count

Change the number of bars with the bars prop.

TSX

import { BarsLoader } from "@/components/ui/bars-loader"

export default function Example() {
  return (
    <div className="flex items-center gap-8">
      <BarsLoader bars={3} />
      <BarsLoader bars={5} />
      <BarsLoader bars={8} />
    </div>
  )
}

Props

Prop	Type	Default	Required
size	"sm" \| "md" \| "lg"	`"md"`	no
bars	number	`5`	no
className	string	—	no

Details

Source filecomponents/ui/bars-loader.tsx

Typeui

Categoriesloaders, core

npm dependencies

Registry depscn

Claude skill—