ba-loading-page
Use ba-loading-page to show a full screen loading banner
Airframe
Web Components
React
React Native
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
When using BAgel with a bundler such as webpack the animation assets may not get copied over. You can fix this by setting the asset path for BAgel. Info for this can be found at the bottom of the Getting started page.
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 and 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
None
Usage
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>