A wrapper for an interactive element that can be replaced by a loader. This block switches one thing to the other.
Use .strut--loading-in-progress class to go to loading state.
Buttons are usually replaced with .loading-bar and have a default blue spinner inside:
Links are usually replaced with .loading-icon and orange spinner:
The default width here is 100%. This is necessary so that the buttons are stretched in width to fit the context. Usually it's either a specific width (eg. 200px), or it's 100% of the entire width of the parent box. See, for example, the Send message button on the complex page.
The opposite case is when we need to make the button shrink the width to the text inside. This has to be done via CSS. Gotta put it all (.button and .strut) inside an inline-block or something with absolute position. See such an example on form page, see Submit application button.
Height is being stretch to the height of block inside. For example, here are two different buttons: