Progress
The Progress 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.
0
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.
Using EuiProgress with a fixed position may result in it being overlayed when its parent wrapper has a z-index value lower than another fixed element, such as EuiHeader. In that case, wrap EuiProgress in an EuiPortal as seen on the Snippet tab.
Absolutely!
The progress bar is absolutely positioned in this panel. You could see how this might be useful in our Toast component.
Progress has a range of sizes and colors
Both size and color can be provided as props. These values will work on both determinate and indeterminate progress bars.