### 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

- Public baseStatesDirective

###### Inputs

- circle
- line
- rectangle
- square

###### HostBindings

- class

###### Accessors

- cssClasses

### 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
get `cssClasses()`
Computes and returns the CSS classes for the skeleton component by delegating to the private getCssClasses method. Returns : `string`

# results matching ""

# No results matching ""