Bar Loader

An equalizer of bars rising and falling in a wave.

Example.tsx

import { BarLoader } from "@/components/better/bar-loader"

export function Example() {
  return (
    <BarLoader count={5} width={4} height={28} gap={4} speed={1} color="#6366f1" />
  )
}

Dependencies

motion

Props

Prop	Type	Default	Description
className	string	—
count	number	5	Number of bars.
width	number	4	Bar width in px.
height	number	28	Max bar height in px.
gap	number	4	Gap between bars in px.
color	string	"currentColor"	Bar colour (any CSS color).
speed	number	1	Seconds for one cycle.