Beispiel

import Skeleton from "@mittwald/flow-react-components/Skeleton";

<Skeleton />

Benutzerdefinierte Größe

import Skeleton from "@mittwald/flow-react-components/Skeleton";

<Column>
  <Skeleton style={{ height: "100px" }} />
  <Skeleton
    style={{
      height: "100px",
      width: "100px",
      borderRadius: "50%",
    }}
  />
</Column>

Accessibility

Das Skeleton soll von Screenreadern ignoriert werden und enthält deswegen das Property aria-hidden.

Die Accessibility eines Ladezustands wird nicht vom Skeleton geregelt.

Um einem Screenreader anzuzeigen, dass ein Inhalt vollständig geladen ist, sollte im Ladezustand die Property aria-busy verwendet werden. Dieses wird auf false gesetzt, sobald der Ladevorgang abgeschlossen ist. (s. MDN)