Loading

Use loading indicators sparingly and opt for showing actual

progress over infinite spinners. It is ok to use multiple loaders on a page if each section is progressively loaded. However, if the entire page is loaded at once, use a single, larger loading indicator.

Elastic

The EuiLoadingElastic loader is great for full page or Elastic product loading screens.

Loading...

Logos

EuiLoadingLogo accepts any of our EuiIcon logos. It should only be used in very large panels, like fullscreen pages.

Loading...

Chart

To indicate that a visualization is loading, use EuiLoadingChart. The multi-color version should be used sparingly, and only when a single large visualization is being loaded.

Loading...

Spinner

EuiLoadingSpinner is a simple spinner for most loading contexts.

Loading...

Props

EuiLoadingChart

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop size# ↦	Description and type Type: "m" | "l" | "xl" ↦	Default value m ↵
Prop mono# ↦	Description and type Type: boolean ↦	Default value false ↵

𐘂𐘂

EuiLoadingLogo

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop size# ↦	Description and type Type: "m" | "l" | "xl" ↦	Default value m ↵
Prop logo# ↦	Description and type While this component should be restricted to using logo icons, it works with any IconType Type: IconType ↦	Default value logoKibana ↵

𐘂𐘂

EuiLoadingSpinner

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop size# ↦	Description and type Type: "s" | "m" | "l" | "xl" | "xxl" ↦	Default value m ↵
Prop color# ↦	Description and type Sets the color of the border and highlight. Each key accepts any valid CSS color value as a string See #EuiLoadingSpinnerColor Type: EuiLoadingSpinnerColor ↦	Default value ↵

𐘂𐘂

EuiLoadingElastic

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop size# ↦	Description and type Type: "m" | "l" | "xl" | "xxl" ↦	Default value m ↵

𐘂𐘂