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.
Logos
EuiLoadingLogo accepts any of our EuiIcon logos. It should only be used in very large panels, like fullscreen pages.
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.
Spinner
EuiLoadingSpinner is a simple spinner for most loading contexts.
Props
EuiLoadingChart
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. 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
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. 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 IconType | Default value logoKibana |
EuiLoadingSpinner
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. 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. EuiLoadingSpinnerColor | Default value |
EuiLoadingElastic
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. 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 |