eui documentation
  1. Components
  2. EuiSkeletonComponent

File

packages/components/eui-skeleton/eui-skeleton.component.ts

Description

A skeleton loading component that provides various shapes and sizes for placeholder content. Used to indicate loading states in the UI with different geometric shapes.

Basic Usage

Example :
<!-- Circle skeleton -->
<eui-skeleton [circle]="true" euiSizeM />

<!-- Line skeleton -->
<eui-skeleton [line]="true" euiSizeL />

<!-- Rectangle skeleton -->
<eui-skeleton [rectangle]="true" euiSizeXL />

Accessibility

  • Use aria-busy="true" on parent container while loading
  • Provide aria-live="polite" region for content updates
  • Consider adding visually hidden text describing loading state

Notes

  • Only one shape should be active at a time (circle, line, square, or rectangle)
  • Combine with size variants (euiSizeXS, euiSizeS, euiSizeM, euiSizeL, euiSizeXL) for different dimensions
  • Use euiRounded for rounded corners on rectangle/square shapes

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives BaseStatesDirective
 Inputs : euiSizeXS euiSizeS euiSizeM euiSizeL euiSizeXL euiRounded euiSizeVariant 
selector eui-skeleton
styleUrl eui-skeleton.scss

Index

Properties
Inputs
HostBindings
Accessors

Inputs

circle
Default value : false, { transform: booleanAttribute }

When true, renders the skeleton as a circle shape
line
Default value : false, { transform: booleanAttribute }

When true, renders the skeleton as a line shape
rectangle
Default value : false, { transform: booleanAttribute }

When true, renders the skeleton as a rectangle shape
square
Default value : false, { transform: booleanAttribute }

When true, renders the skeleton as a square shape

HostBindings

class
Type : string

Computes and returns the CSS classes for the skeleton component by delegating to the private getCssClasses method.

Properties

Public baseStatesDirective
Type : BaseStatesDirective
Default value : inject(BaseStatesDirective)

Instance of BaseStatesDirective used to manage component states

Accessors

cssClasses
getcssClasses()

Computes and returns the CSS classes for the skeleton component by delegating to the private getCssClasses method.

Returns : string

results matching ""

    No results matching ""