ba-loading-skeleton
Use ba-loading-skeleton to show a loading animation on individual sections
Figma
GitHub
Storybook
Live Demo
<ba-loading-skeleton
settings="h1,p,p,p,p,ba-link,ba-button"
></ba-loading-skeleton>
Guidelines
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
Accessibility
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.
Code
Properties & 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 |
Element tags to be used
- h1
- h2
- h3
- h4
- h5
- h6
- p
- ba-link
- ba-back-link
- ba-image-1-1
- ba-image-16-9
- ba-image-9-16
- ba-image-4-3
- ba-image-3-4
- ba-image-credit-card
[
{
"barHeight": Number px/rem/%,
"barWidth": Number px/rem/%,
"gapBeforeBar": Number px/rem/%
}
]
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>