A skeleton is used as a visual placeholder for an element while it is in a loading state and usually presents itself as a simplified wireframe-like version of the UI it is representing.
Used to give users a sense of loading progress activity rather than merely presenting a blank page or container.
Should not be made to reflect a specific element (e.g. skeleton-button, skeleton-text, skeleton-heading, etc...). The skeleton should be as generic of a container as possible to represent various elements of different shapes and sizes.
This feature allows a fast-skeleton component to accept a source for a skeleton "pattern" through the pattern attribute or an inline SVG code via the component's slot. A skeleton pattern may be used to represent a transparent graphical shape and layout of a component.
When used in this way the skeleton component would essentially act as a container for the provided SVG mask which can then be applied anywhere in an application.
The SVG would have CSS mask properties applied to it allowing underlying colors and effects (i.e. shimmer) to be visible through the transparent template.
This feature allows the fast-skeleton component to provide maximum design flexibility to represent many shapes and layouts.
A circle or rect (rectangle) shape can be selected. The border-radius of the rect shape will be determined by the design system.
- Ant Design
- Carbon
- FluentUI (Shimmer)
- Material UI
- Kalo
- Pajamas
- Polaris
- React Loading Skeleton
- Semantic UI (Placeholder)
- Telus
- Thumbprint
- Vercel
A designer can create an SVG design pattern asset to create custom visual layouts for this component. If a developer does not have design support, they may use skeleton components as a stand-alone element in an existing component. Developers also have the option to manually code SVG's to be used as templates. SVG code quality will have to be enforced to ensure proper rendering of the pattern masks.
fast-skeleton
| Name | Description | Type |
|---|---|---|
shape |
Determines the skeleton coin shape. Rectangle by default. | `string: rect (default) |
fill |
Sets the background fill of the skeleton component | string: hex color |
pattern |
Accepts a URL for an SVG asset | string: URL |
shimmer |
Toggles the shimmer effect | boolean |
<template
aria-busy="${x => x.ariaBusy}"
>
<img src="${x => x.pattern}" />
<slot></slot>
</template><fast-skeleton shape="rect"></fast-skeleton>SVG pattern passed via pattern attribute:
<fast-skeleton
pattern="https://example.com/template.svg"
>
</fast-skeleton>SVG pattern passed via component slot:
<fast-skeleton shape="rect">
<svg></svg>
</fast-skeleton>- The
aria-busyattribute should be applied and set totruewhile this the UI the skeleton represented is still in a loading state - To maximize the information presented to assistive technologies inline SVG's are the preferred method for applying a
pattern
The component should respond to directional settings.