PUI.Loading
(pui v1.0.0-beta.5)
Copy Markdown
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-clickevents 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 |
Summary
Functions
Renders a loading bar component.