Inline loading
Color
Class | Property | Color token |
---|---|---|
.bx--loading__svg | stroke | $ui-03 |
.bx--inline-loading__checkmark | color | $interactive-01 |
.bx--inline-loading__text | color | $text-01 |
Typography
Button text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.
Class | Font-size (px/rem) | Font-weight | Type token |
---|---|---|---|
.bx--inline-loading__text | 14 / 0.875 | Regular / 400 | $body-short-01 |
Structure
Class | Property | px / rem | Spacing token |
---|---|---|---|
Spinner | width, height | 16 / 1 | – |
Checkmark | width, height | 16 / 1 | – |
![Inline loading spinner structure measurements Inline loading spinner structure measurements](/static/988f179af6e92bce3da6f7e196aea1bd/c801a/inline-loading-style-1.png)
![Inline loading states Inline loading states](/static/d8115ac6bd922cbdfd65447eb1139f3e/c801a/inline-loading-style-2.png)
![Inline loading spinner in context example Inline loading spinner in context example](/static/e446f15f788bd183707625a0c14afce4/c801a/inline-loading-style-3.png)
Structure measurements for small and large loading spinner | px / rem
Placement
The inline loading component should appear during any user action loading. If button is used to trigger the action, the inline loading component should replace that button.
![Inline loading spinner animated_in context example](/a12da714d1543a1ebf216983682adb8d/inline-loading-animated.gif)
Example of a inline loading in product context