Progress
The EuiProgress component by default will display in an indeterminate loading state (rendered as a single div) until you define a
max and value prop. The size prop refers to its vertical height. It will always stretch 100% to its container.
Progress with values
Once the max and value props are set, it will act as a determinate progress bar. This is rendered using an HTML5 progress tag.
Progress can have absolute or fixed positions
Using the position prop we can align our bar to be fixed or absolute. In both options, the background color of the base bar is dropped (since the context of width is already known from your wrapping element). For the absolute option, make sure that your wrapping element has position: relative applied.
Progress bars over fixed headers
Using the fixed position may result in EuiProgress being overlaid when its parent wrapper has a z-index value lower than another fixed element, such as EuiHeader. In this scenario, wrap EuiProgress in an EuiPortal (example below).
Sizes
You can adjust the size of both determinate and indeterminate progress bars.
Colors
EuiProgress supports a few options for color. You can pass any value from our basic color set or from our visualization palette (vis0 through vis9). To learn more about color usage, go to the
Additionally, you can pass any valid color string like a hex value or named color. Each valueText renders with a high contrast version of the color.
Progress for charts
Determinate progress bar can be used as simple bar charts. Use them with the label and valueText props to show the data corresponding to each bar.
Setting valueText={true} will add a % sign next to thevalue passed. If you want to display a custom valueText, you can pass a node instead.
Props
EuiProgress
Prop | Description and type | Default value |
|---|---|---|
Prop label# | Description and type Type: ReactNode | Default value |
Prop max# | Description and type Type: number | Default value |
Prop labelProps# | Description and type Object of props passed to the wrapping the determinate progress's label CommonProps & HTMLAttributes<HTMLSpanElement> | Default value |
Prop valueText# | Description and type Type: ReactNode | Default value false |
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: "xs" | "s" | "m" | "l" | Default value m |
Prop color# | Description and type One of EUI's color palette, vis colors or a valid CSS color value https://developer.mozilla.org/en-US/docs/Web/CSS/color_value string | Default value success |
Prop position# | Description and type Type: "fixed" | "absolute" | "static" | Default value static |