Bars

import { Bars } from "@/components/loading-ui/bars";

export function BarsDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/bars
Copy

Usage

Copyimport { Bars } from "@/components/loading-ui/bars";

Copy<Bars className="h-12 w-16" />

Customization

Bars is a compact activity indicator for dense UI. It stretches each bar to the container height, divides width evenly across the bars count, and inherits currentColor. Timing is controlled with --duration and --delay.

Size

Set a stable height and width so the bars have room to breathe next to labels or inside compact controls.

import { Bars } from "@/components/loading-ui/bars";

export function BarsSize() {

Color

Use inherited foreground colors in product UI, or direct text utilities for status-specific swatches.

import { Bars } from "@/components/loading-ui/bars";

export function BarsColor() {

Duration

Set --duration when the indicator should feel snappier or more patient.

import { Bars } from "@/components/loading-ui/bars";

export function BarsDuration() {

Stagger

Set --delay to control how tightly the bars follow each other.

import { Bars } from "@/components/loading-ui/bars";

export function BarsStagger() {

Bar Count

Use bars to make the indicator denser for wider surfaces or simpler for tight inline states.

import { Bars } from "@/components/loading-ui/bars";

export function BarsCount() {

Examples

These examples keep Bars close to operational UI: queues, indexing, and processing states where a meter-like shape feels appropriate.

Button

Buttons can use Bars when the action is actively processing but should still feel compact.

import { Button } from "@/components/ui/button";
import { Bars } from "@/components/loading-ui/bars";

Badge

Badges work well for small active, queued, or indexing labels.

import { Badge } from "@/components/ui/badge";
import { Bars } from "@/components/loading-ui/bars";

Input Group

Input groups keep indexing or search feedback next to the field it affects.

import {
  InputGroup,
  InputGroupAddon,