Components

Skeleton

A placeholder in the shape of content that is still loading.

Installation

Skeleton is in the @bigbang/ui package.

import { Skeleton } from '@bigbang/ui';

<Skeleton lines={2} loading={isLoading}>
  <p>Card description goes here.</p>
</Skeleton>;

shape

Description: Shape of the placeholder: lines of text, a block for media or cards, or a circle for an avatar.
Type: 'block' | 'circle' | 'text'
Default: 'text'

lines

width

Description: Inline size as a CSS length, such as '12rem' or '50%'. The default fills the width; a circle is 32 px.
Type: string

height

Description: Block size of a block or circle as a CSS length. A block without it keeps a 16:9 ratio.
Type: string

loading

Description: While true, the placeholder shows; when false, children replace it and fade in.
Type: boolean
Default: true

label

Description: What is loading, read by screen readers. Without it, the library string ui.skeleton.loading is read ("İçerik yükleniyor" or "Loading content").
Type: string

decorative

Description: Hides the placeholder from assistive technology, when a parent already reports the loading state.
Type: boolean
Default: false

className

children