Loading bar
A thin accent line along the top of the viewport while a page or request loads.
Examples
Loading bar
Fixed to the top of the viewport; toggle data-active, then data-done.Anatomy
.loading-bar | One empty element per page. Fixed to the top edge above everything else, two pixels tall, invisible until active. |
API
| Attribute | Values | Description |
|---|---|---|
data-active | boolean | Shows the bar and grows it towards 85% over 2.5 s, slowing as it goes. Set it when the request starts. |
data-done | boolean | Fills the bar, then fades it out. Wins over data-active, so you can add it without removing that; clear both before the next start. |
Accessibility
- The bar is decorative and ignores the pointer; screen readers get nothing from it.
- Announce loading where it happens:
aria-busy="true"on the region being replaced, or arole="status"message.