Loaders

# Brok UI: Bars Loader (`bars-loader`)

Animated equalizer / wave bars loader with an optional label, in five variants — bars, wave, symmetric, accordion and equalizer.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add bars-loader
```

## Usage

```blade
<div class="flex flex-wrap items-end gap-8">
    <div class="flex flex-col items-center gap-3">
        <x-ui.bars-loader variant="bars" label="Loading" />
        <span class="text-xs text-muted-foreground">bars</span>
    </div>
    <div class="flex flex-col items-center gap-3">
        <x-ui.bars-loader variant="wave" label="Loading" />
        <span class="text-xs text-muted-foreground">wave</span>
    </div>
    <div class="flex flex-col items-center gap-3">
        <x-ui.bars-loader variant="symmetric" label="Loading" />
        <span class="text-xs text-muted-foreground">symmetric</span>
    </div>
    <div class="flex flex-col items-center gap-3">
        <x-ui.bars-loader variant="accordion" label="Loading" />
        <span class="text-xs text-muted-foreground">accordion</span>
    </div>
    <div class="flex flex-col items-center gap-3">
        <x-ui.bars-loader variant="equalizer" label="Loading" />
        <span class="text-xs text-muted-foreground">equalizer</span>
    </div>
</div>
```

## Props

- `variant` (bars|wave|symmetric|accordion|equalizer, default `bars`) — Motion pattern: bars, wave, symmetric, accordion, or equalizer.
- `size` (md|sm|lg, default `md`) — Overall bar height: sm, md, or lg.
- `label` (string, default `Loading`) — Accessible status label announced to screen readers.

## Use when

- Use while content or system work is in progress so users understand the interface is responding.
- Indicating an in-progress background action with a compact animated bars indicator.
- Wanting a choice of five bar motions (bars, wave, symmetric, accordion, equalizer) to match a loading-ui.com aesthetic.

## Avoid when

- Do not use indefinite loading indicators when you can show structure, progress, or a next step instead.
- Needing a generic circular spinner; use spinner instead.
- Loading a full page or section; pair with skeleton for layout-shaped placeholders instead.

## Anti-patterns

- Indefinite loading with no progress or recovery

## Rules

- Use the `<brok:bars-loader>` tag (or `<x-ui.bars-loader>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/bars-loader
- Registry JSON (files, props, contract): https://brokui.dev/r/open/bars-loader.json

@props([
    'variant' => 'bars',
    'size' => 'md',
    'label' => 'Loading',
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    // Five faithful loading-ui.com bar / equalizer / wave looks. Every variant
    // renders the SAME five `bars-loader-bar` spans; only the motion differs and
    // is keyed on [data-slot="bars-loader"][data-variant="…"] in ui.css
    // (reduced-motion gated, token-only colours, transform: scaleY only — never
    // height — so it stays on the GPU and avoids layout thrash). Never splice a
    // value into an arbitrary class; size maps to FIXED literal classes below.
    $variants = ['bars', 'wave', 'symmetric', 'accordion', 'equalizer'];
    $variant = in_array($variant, $variants, true) ? $variant : 'bars';

    $sizes = ['sm', 'md', 'lg'];
    $size = in_array($size, $sizes, true) ? $size : 'md';

    // Per-size overall box (height drives the bars; width keeps the row tidy).
    // The gap sits on the row of bars itself (the root has a single child).
    $boxes = [
        'sm' => 'h-4',
        'md' => 'h-6',
        'lg' => 'h-10',
    ];
    $rowGaps = [
        'sm' => 'gap-1',
        'md' => 'gap-1',
        'lg' => 'gap-2',
    ];
    $barWidths = [
        'sm' => 'w-0.5',
        'md' => 'w-1',
        'lg' => 'w-2',
    ];
    $box = $boxes[$size];
    $rowGap = $rowGaps[$size];
    $barWidth = $barWidths[$size];

    // Staggered delays per bar (ms). The same five offsets drive every variant;
    // the keyframes give each its distinct character.
    $delays = [0, 120, 240, 360, 480];
@endphp

{{--
    Bars loader — animated equalizer / wave bars with an optional label, faithful
    to loading-ui.com. `variant` picks the motion: `bars` (staggered scale),
    `wave` (travelling sine), `symmetric` (grow from centre), `accordion`
    (sweeping expand/contract) and `equalizer` (lively, varied speeds). All motion
    is keyed on [data-slot="bars-loader"][data-variant="…"] in ui.css and gated
    for reduced-motion; colour is the inherited currentColor so the raw-colour
    guard stays happy.
--}}
<div
    data-slot="bars-loader"
    data-variant="{{ $variant }}"
    data-size="{{ $size }}"
    role="status"
    aria-label="{{ __($label) }}"
    {{ $attributes->merge(['class' => 'inline-flex items-end text-sm text-muted-foreground '.$box]) }}
>
    <span class="inline-flex h-full items-end {{ $rowGap }}" aria-hidden="true">
        @foreach ($delays as $delay)
            <span class="bars-loader-bar inline-block h-full rounded-full bg-current {{ $barWidth }}" style="animation-delay:{{ $delay }}ms"></span>
        @endforeach
    </span>
    <span class="sr-only">{{ __($label) }}</span>
</div>