The indeterminate InlineProgressBar component was recently added to Codex. While the visual properties of this variant are based on those of its parent (the indeterminate ProgressBar), the inline element is meant to be used in different context: in small spaces where the bar is the only indicator that loading is underway, and thus should remain visible to remove any potential confusion.
There are a couple of adjustments that we could apply to the indeterminate ProgressBar to make its variant satisfy the inline use case a bit better without creating a big departure from the parent component:
- Make clear that loading is still going on by reducing the waiting time between bar iterations (keeping the loading indicator visible for as long as loading lasts). This would basically involve:
1.1. Adjusting the value of the translate() in the 100% keyframe of the cdx-progress-bar_bar... animation to 300% in the LTR animation, and -300% in the RTL animation.
1.2. Adjusting the speed of the indeterminate progress bar animation from 2s to 1.6s. (This also prevents the bar from slowing down when wrapped in small containers).
- Width: right now, we're applying a 40% width to the bars, which is not part of the spacing scale/tokens. We should apply a width of 33% instead, which we'll be able to replace by a token soon.
Note:
The listed changes will also need to be applied to the indeterminate ProgressBar in OOUI, in order to keep both libraries visually and interactively consistent.
Acceptance criteria
- Make the change in Codex
- Make the change in OOUI
