Live Demo
<div style="position: relative; height: 300px; overflow: hidden">
<!-- forcing a container for documentation purposes -->
<ba-loading-page
theme="midnight-700"
text="Just a moment"
></ba-loading-page>
</div>
Guidelines
ba-loading-page behaves as a full screen takeover and centres the content in the middle of the users screen. To do this the component occupies the entire width and height of the page leaving no space for other elements or components (including headers and footers)
The component should not be used as a modal as there are many accessibility issues with modals. Some of which are:
- Increased cognitive load
- Frustrating user experience on small screens
- Poorly accessible
Further reading
Accessibility
For uses that prefer reduced motion, we show the British Airways logo instead.
Some users experience distraction or nausea from animated content. For example, if scrolling a page causes elements to move (other than the essential movement associated with scrolling) it can trigger vestibular disorders.
Uses aria-live to allow screen readers to announce the text added into the component on page load and when dynamically updated.
Not every user will be able to see the loading icon, adding text informs them about what is happening on the screen
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
text(required) |
text |
Sets the text, this will populate a h1 element within the component | string |
undefined |
theme |
theme |
Which theme to use for the loading page | "midnight-700" | undefined |
undefined |
Permitted ARIA roles
None
Parent Components
NoneUsage
Basic usage
<main>
<ba-loading-page
text="Just a moment"
></ba-loading-page>
</main>
Changing the theme
<main>
<ba-loading-page
theme="midnight-700"
text="Just a moment"
></ba-loading-page>
</main>