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.
Note about progress bars over fixed headers
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.
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 Colors page.
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 the value passed. If you want to display
a custom valueText, you can pass a node instead.