Skeleton

The skeleton component is used as a visual placeholder for an element while it is in a loading state. It usually presents itself as a simplified wireframe-like version of the UI it is representing.

Use cases:

• Indicating loading state

Example

Genesis

Declaration

<rapid-skeleton></rapid-skeleton>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-skeleton></rapid-skeleton>
  `,
})
export class MyElement extends GenesisElement {
}

React

Declaration

  <rapid-skeleton></rapid-skeleton>

Usage

export function MyComponent() {
  return (
    <rapid-skeleton></rapid-skeleton>
  );
}

Angular

Declaration

  <rapid-skeleton></rapid-skeleton>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
      <rapid-skeleton></rapid-skeleton>
      `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes

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

This component doesn't have any properties which are not also 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