ba-loading-skeleton
Use ba-loading-skeleton to show a loading animation on individual sections
Airframe
Web Components
React
React Native
Anatomy
Image
Displays at the dimensions of the image about to load for example '16-9', or '1-1'
Text (example)
Shows that text will be loading in the space illustrated. This can be any combination of headings, paragraphs or links
Button
Indicates a button component will be loaded
Design Documentation
Where possible use rem units when defining custom settings. This provides more flexibility and helps with making the bars in the component responsive.
If you do need to use px units make sure they are in multiples of 8. This is because the design system is built upon an 8px grid, so all properties should match this so that they visually align with the other design system elements.
Further reading:
ba-loading-skeleton behaves as a loader for small sections of content and does this in an accessible way.
Once the content has loaded in hide the section loader or remove it from the DOM. This will stop screen readers announcing the loading text within the component.
An example can be found on storybook
Live Demo
<ba-loading-skeleton
settings="h1,p,p,p,p,ba-link,ba-button"
></ba-loading-skeleton>
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
settings(required) |
settings |
A list of element tags, or a stringified list of loaderSettings. You must pick one or the other, they cannot be combined | LoaderSettings[] | string |
undefined |
Permitted ARIA roles
- None
Slots
No slotted content available for this component.
Parent components
ba-loading-skeleton can be slotted into:
Usage
Basic usage
<ba-loading-skeleton
settings="h1,p,p,p,p,ba-link,ba-button"
></ba-loading-skeleton>Multiple paragraphs
When using multiple paragraph elements. The last paragraph in a set has a reduced width.
<ba-loading-skeleton
settings="p,p,p,p"
></ba-loading-skeleton>Usage with images
When needing to show an image section add the required aspect ratio with the ba-image tag
<ba-loading-skeleton settings="ba-image-16-9"></ba-loading-skeleton>
<ba-loading-skeleton settings="ba-image-1-1"></ba-loading-skeleton>Custom Usage
<ba-loading-skeleton
settings='[
{
"barHeight": "352px",
"barWidth": "100%",
"gapBeforeBar": "80px"
},
{
"barHeight": "2rem",
"barWidth": "40%",
"gapBeforeBar": "0.5rem"
},
{
"barHeight": "2rem",
"barWidth": "50%",
"gapBeforeBar": "0.5rem"
},
{
"barHeight": "24px",
"barWidth": "30%",
"gapBeforeBar": "0.5rem"
}
]'
></ba-loading-skeleton>Element tags to be used
- h1
- h2
- h3
- h4
- h5
- h6
- p
- ba-link
- ba-link-back
- ba-button
- ba-image-1-1
- ba-image-16-9
- ba-image-9-16
- ba-image-4-3
- ba-image-3-4
- ba-image-credit-card
Guidelines
For uses that prefer reduced motion, the animation is completely disabled.
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.
The animation stops animating after 5 seconds to comply with WCAG Success Criterion 2.2.2
Further Reading:
Currently the colours used in the section loader do no meet the WCAG color contrast specifications.
This will be fixed in a later release.
Keyboard navigation
No keyboard interactions have been defined for this component.
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-loading-skeleton matches the width of preceding elements (header or paragraph) following layout rules
- On mobile, ba-loading-skeleton extends to the full width of the screen
- On desktop, ba-loading-skeleton is never smaller than 3 columns
- ba-loading-skeleton is only used for optional information, not content required by every user
- barWidth should only be able to go to 100%
- barHeight should be able to expand with no limits
Accessibility checklist
- Loading text is read out for screen reader users in correct language
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-loading-skeleton has loading text for screen readers
- Is operable using assistive technology
- Colour contrast for all states in all BAgel themes
- Animations respect users' reduced motion settings