Skeleton

The skeleton component shows a visual placeholder for an element while it is in a loading state. This is usually presented as a simplified wireframe-like version of the UI that it is representing.

Use cases:

• providing a placeholder UI element that indicates the actual component that will load in a location (to make the loading process seem smoother to the user)
• Indicating loading state where a page could take time to load

Example

The example below displays a rectangular image based on a .SVG file. The shimmer attribute has been used to animate the image.

Genesis

Declaration

<rapid-skeleton></rapid-skeleton>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-skeleton shape="rect" pattern="/svg/skeleton-test-pattern.svg" shimmer></rapid-skeleton>
  `,
})
export class MyElement extends GenesisElement {
}

React

Declaration

  <rapid-skeleton></rapid-skeleton>

Usage

export function MyComponent() {
  return (
    <rapid-skeleton shape="rect" pattern="/svg/skeleton-test-pattern.svg" shimmer></rapid-skeleton>
  );
}

Angular

Declaration

  <rapid-skeleton></rapid-skeleton>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
      <rapid-skeleton shape="rect" pattern="/svg/skeleton-test-pattern.svg" shimmer></rapid-skeleton>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

API

Attributes

This table shows attribute binding examples for Genesis Component syntax. The HTML closing tag is not included.

Name	Type	Description	Example
fill	string	Indicates the Skeleton should have a filled style.	<rapid-skeleton fill="context-fill">
shape	"circle" | "rect"	Indicates what the shape of the Skeleton should be. Default: "rect"	<rapid-skeleton shape="circle">
pattern	string	A URL for an image asset may be passed to the pattern attribute. In this mode, the rapid-skeleton component is used as a container for a transparent SVG that may express a more complex placeholder.	<rapid-skeleton pattern="file://some-alternate-pattern.svg">
shimmer	boolean	Activate the component's shimmer effect.	<rapid-skeleton shimmer>

Properties

The properties for this component are all controlled via attributes.

Slots

Name	Description
Default	An inline SVG can also be inserted into this default slot

Example:

<rapid-skeleton shape="rect" shimmer>
  <svg id="pattern" width="100%" height="100%">
    <defs>
      <mask id="mask" x="0" y="0" width="100%" height="100%">
        <rect x="0" y="0" width="100%" height="100%" fill="#ffffff"></rect>
        <rect x="0" y="0" width="100%" height="45%" rx="4"></rect>
        <rect x="25" y="55%" width="90%" height="15px" rx="4"></rect>
        <rect x="25" y="65%" width="70%" height="15px" rx="4"></rect>
        <rect x="25" y="80%" width="90px" height="30px" rx="4"></rect>
      </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill="#ffffff"></rect>
  </svg>
</rapid-skeleton>

Parts

This component doesn't have any parts.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.

Further customisation

The following CSS variables can be used to customise the appearance.

CSS Variable	Expected value
--skeleton-fill	Colour
--skeleton-animation-fill	Colour
--skeleton-animation-gradient	Linear gradient
--skeleton-animation-timing	Easing function