Loaders

# Brok UI: Orbit Loader (`orbit-loader`)

Orbital / circular loaders in eight variants — orbit, satellite, concentric, twin, clock, dots-ring, ripple and pulse.

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

## Install

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

## Usage

```blade
<div class="flex flex-wrap items-end gap-x-10 gap-y-8 text-foreground">
    <div class="flex flex-col items-center gap-3"><x-ui.orbit-loader variant="orbit" /><span class="text-xs text-muted-foreground">orbit</span></div>
    <div class="flex flex-col items-center gap-3"><x-ui.orbit-loader variant="satellite" /><span class="text-xs text-muted-foreground">satellite</span></div>
    <div class="flex flex-col items-center gap-3"><x-ui.orbit-loader variant="concentric" /><span class="text-xs text-muted-foreground">concentric</span></div>
    <div class="flex flex-col items-center gap-3"><x-ui.orbit-loader variant="twin" /><span class="text-xs text-muted-foreground">twin</span></div>
    <div class="flex flex-col items-center gap-3"><x-ui.orbit-loader variant="clock" /><span class="text-xs text-muted-foreground">clock</span></div>
    <div class="flex flex-col items-center gap-3"><x-ui.orbit-loader variant="dots-ring" /><span class="text-xs text-muted-foreground">dots-ring</span></div>
    <div class="flex flex-col items-center gap-3"><x-ui.orbit-loader variant="ripple" /><span class="text-xs text-muted-foreground">ripple</span></div>
    <div class="flex flex-col items-center gap-3"><x-ui.orbit-loader variant="pulse" /><span class="text-xs text-muted-foreground">pulse</span></div>
</div>
```

## Props

- `variant` (orbit|satellite|concentric|twin|clock|dots-ring|ripple|pulse, default `orbit`) — Motion pattern: orbit, satellite, concentric, twin, clock, dots-ring, ripple, or pulse.
- `size` (md|sm|lg, default `md`) — Overall box size: 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 circular indicator.
- Wanting a choice of eight orbital motions (orbit, satellite, concentric, twin, clock, dots-ring, ripple, pulse) 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:orbit-loader>` tag (or `<x-ui.orbit-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/orbit-loader
- Registry JSON (files, props, contract): https://brokui.dev/r/open/orbit-loader.json

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

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    // Eight faithful loading-ui.com orbital looks. Each variant is structural DOM +
    // motion keyed on [data-slot="orbit-loader"][data-variant="…"] in ui.css
    // (reduced-motion gated, token-only colours, GPU transform/opacity only).
    // Never splice a value into an arbitrary class — sizes map to fixed classes.
    $allowed = ['orbit', 'satellite', 'concentric', 'twin', 'clock', 'dots-ring', 'ripple', 'pulse'];
    $variant = in_array($variant, $allowed, true) ? $variant : 'orbit';

    $sizes = ['sm' => 'size-6', 'md' => 'size-9', 'lg' => 'size-14'];
    $box = $sizes[$size] ?? $sizes['md'];
@endphp

{{--
    Orbit loader — orbital / circular loaders faithful to loading-ui.com. `variant`
    picks the look: `orbit` (dot orbiting a faint ring), `satellite` (dot on the
    ring edge + counter-orbiting chip), `concentric` (nested rings at differing
    speeds/directions), `twin` (two opposed dots), `clock` (sweeping hand), the
    classic `dots-ring` (8 sequenced dots), `ripple` (sonar rings) and `pulse`
    (filled dot with expanding halo). All motion lives in ui.css and rests static
    under reduced-motion; colours are semantic tokens so it themes for free.
--}}
<div
    data-slot="orbit-loader"
    data-variant="{{ $variant }}"
    data-size="{{ $size }}"
    role="status"
    aria-label="{{ __($label) }}"
    {{ $attributes->merge(['class' => "relative inline-block $box text-muted-foreground"]) }}
>
    @if ($variant === 'orbit')
        {{-- The dot is centred ON the ring line (-translate-y-1/2), not tucked inside it. --}}
        <span class="absolute inset-0 rounded-full border-2 border-current/20" aria-hidden="true"></span>
        <span class="orbit-loader-spin absolute inset-0" aria-hidden="true">
            <span class="absolute left-1/2 top-0 size-1/4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-current"></span>
        </span>
    @elseif ($variant === 'satellite')
        <span class="absolute inset-0 rounded-full border-2 border-current/20" aria-hidden="true"></span>
        <span class="orbit-loader-spin absolute inset-0" aria-hidden="true">
            <span class="absolute left-1/2 top-0 size-1/4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-current"></span>
        </span>
        <span class="orbit-loader-spin-rev absolute inset-0" aria-hidden="true">
            <span class="absolute bottom-0 left-1/2 size-[15%] -translate-x-1/2 translate-y-1/2 rounded-full bg-muted-foreground"></span>
        </span>
    @elseif ($variant === 'concentric')
        <span class="orbit-loader-spin absolute inset-0 rounded-full border-2 border-transparent border-t-current border-r-current" aria-hidden="true"></span>
        <span class="orbit-loader-spin-rev absolute inset-[22%] rounded-full border-2 border-transparent border-b-current border-l-current" aria-hidden="true"></span>
        <span class="orbit-loader-spin absolute inset-[44%] rounded-full border-2 border-transparent border-t-current" aria-hidden="true"></span>
    @elseif ($variant === 'twin')
        <span class="absolute inset-0 rounded-full border-2 border-current/10" aria-hidden="true"></span>
        <span class="orbit-loader-spin absolute inset-0" aria-hidden="true">
            <span class="absolute left-1/2 top-0 size-1/4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-current"></span>
            <span class="absolute bottom-0 left-1/2 size-1/4 -translate-x-1/2 translate-y-1/2 rounded-full bg-current"></span>
        </span>
    @elseif ($variant === 'clock')
        <span class="absolute inset-0 rounded-full border-2 border-current/20" aria-hidden="true"></span>
        <span class="orbit-loader-spin absolute inset-0 flex items-start justify-center" aria-hidden="true">
            <span class="block w-px origin-bottom rounded-full bg-current" style="height:50%"></span>
        </span>
    @elseif ($variant === 'dots-ring')
        {{-- Eight fixed dots on the ring's edge (radius = 41% of the box: dot 16%
             wide, 0.41 / 0.16 ≈ 256% of its own size); only the fade travels
             round, the way a native spinner reads. --}}
        <span class="absolute inset-0" aria-hidden="true">
            @for ($i = 0; $i < 8; $i++)
                <span
                    class="orbit-loader-dot absolute left-1/2 top-1/2 size-[16%] rounded-full bg-current"
                    style="transform:translate(-50%,-50%) rotate({{ $i * 45 }}deg) translateY(-256%);animation-delay:{{ -1000 + $i * 125 }}ms"
                ></span>
            @endfor
        </span>
    @elseif ($variant === 'ripple')
        <span class="orbit-loader-ripple absolute inset-0 rounded-full border-2 border-current" aria-hidden="true"></span>
        <span class="orbit-loader-ripple absolute inset-0 rounded-full border-2 border-current" style="animation-delay:-0.9s" aria-hidden="true"></span>
    @elseif ($variant === 'pulse')
        <span class="orbit-loader-halo absolute inset-0 rounded-full border-2 border-current" aria-hidden="true"></span>
        <span class="absolute inset-[28%] rounded-full bg-current" aria-hidden="true"></span>
    @endif

    <span class="sr-only">{{ __($label) }}</span>
</div>