Components

Top Progress

An NProgress-style top loading bar with start / set / done controls for navigation.

php artisan blatui:add top-progress

The bar above sits in-flow for this preview. In production it is fixed to the very top of the viewport.

{{--
    A thin NProgress-style loading bar. In a real app it's fixed to the top of the page;
    here :demo="true" renders it in-flow so you can watch it animate. The Start / Done
    buttons drive the bar through its exposed window events (top-progress:start / :done) —
    the same hook you'd fire from your navigation lifecycle.
--}}
<div x-data class="w-full max-w-md space-y-4">
    <div class="bg-card overflow-hidden rounded-lg border">
        <x-ui.top-progress :demo="true" :height="3" />
        <div class="text-muted-foreground p-4 text-sm">
            The bar above sits in-flow for this preview. In production it is fixed to the
            very top of the viewport.
        </div>
    </div>

    <div class="flex gap-2">
        <x-ui.button size="sm" x-on:click="$dispatch('top-progress:start')">Start</x-ui.button>
        <x-ui.button size="sm" variant="outline" x-on:click="$dispatch('top-progress:done')">Done</x-ui.button>
    </div>
</div>

API Reference

Props, slots and exposed methods for <x-ui.top-progress>.

Props

Prop	Type	Default	Description
`color`	`string`	—	Bar color, any CSS color. Defaults to the primary token (var(--color-primary)).
`height`	`int`	`2`	Bar thickness in pixels.
`demo`	`bool`	`false`	Render the bar in-flow (relative, not fixed) for docs previews. Leave false in production so the bar is fixed to the top of the viewport.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`start()`	Show the bar and begin trickling its width toward ~90%. Also driven by the window event top-progress:start.
`set(p)`	Set the width to the fraction p (0..1). Also driven by top-progress:set with detail.value.
`done()`	Jump to 100%, then fade out and reset. Also driven by the window event top-progress:done.