# `PUI.Loading`

Loading indicators and progress components.

## Topbar Loading Indicator

A progress bar that shows during page transitions and form submissions,
replacing the traditional topbar.js library.

Add to your root layout:

    <PUI.Loading.topbar />

## Customization

Adjust the delay and color:

    <PUI.Loading.topbar delay={100} class="!bg-amber-400 !shadow-amber-500/20" />

## How It Works

The loading bar automatically appears when:
- LiveView is navigating between pages
- Forms are being submitted
- `phx-click` events are processing

It automatically hides when the operation completes.

## Attributes

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `delay` | `integer` | `300` | Milliseconds before showing the bar |
| `class` | `string` | `""` | Additional CSS classes for the bar |

# `topbar`

Renders a loading bar component.

## Example

    <PUI.Loading.topbar />
    <PUI.Loading.topbar delay={100} class="!bg-amber-400" />

## Attributes

* `delay` (`:integer`) - Defaults to `300`.
* `class` (`:string`) - Defaults to `""`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*