Loading spinner size shrinked a lot

[KJaspers]

I found that since the merge of #7447 the size of the loading and inline loading indicator is much smaller. Before it was:

• Loading: 10.5rem
• Inline loading: 2rem

Now it is:

• Loading: 5.5rem
• Inline loading: 1rem

In our application the new sizes look quite weird. We downloadd the styles from here: https://unpkg.com/browse/carbon-components@10.28.0/css/

Here a sample of how weird it looks in our application:

[emyarod]

related: #5367

the new sizes are according to our component spec and appear like this:

are you applying styles on top of the base Carbon styles?

[KJaspers]

We use the Vanilla Carbon example from https://the-carbon-components.netlify.app/?nav=inline-loading
together with the above mentioned style sheet. This is how our template for inline loading looks like:

<div data-inline-loading class="bx--inline-loading" role="alert" aria-live="assertive">
	<div class="bx--inline-loading__animation">
		<!-- add style attribute because of https://github.com/carbon-design-system/carbon/issues/7946 -->
		<div data-inline-loading-spinner class="bx--loading bx--loading--small" style="width: 2rem;height: 2rem;">
			<svg class="bx--loading__svg" viewBox="-75 -75 150 150">
				<circle class="bx--loading__background" cx="0" cy="0" r="26.8125" style="stroke: transparent;"/>
				<circle class="bx--loading__stroke" cx="0" cy="0" r="26.8125"/>
			</svg>
		</div>
		<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-loading__checkmark-container" hidden="" data-inline-loading-finished="" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path></svg>
		<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--inline-loading--error" hidden="" data-inline-loading-error="" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M2,16H2A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm23.15,7.75L8.25,6.85a12,12,0,0,1,16.9,16.9ZM8.24,25.16A12,12,0,0,1,6.84,8.27L23.73,25.16a12,12,0,0,1-15.49,0Z"></path></svg>
	</div>
	<p data-inline-loading-text-active class="bx--inline-loading__text" style="color: white; padding-bottom: 0;" data-locale-id="loading"></p>							 
</div>

Same for the loading indicator (not inline).

No additional styles on top, except for the one above (style="width: 2rem;height: 2rem;") to work around this issue.

[tw15egan]

It looks like we need to update the vanilla hbs files to the following to match the react implementation.

inline-loading

<svg class="{{@root.prefix}}--loading__svg" viewBox="0 0 100 100">
        <circle class="{{@root.prefix}}--loading__background" cx="50%" cy="50%" r="42" />
        <circle class="{{@root.prefix}}--loading__stroke" cx="50%" cy="50%" r="42"/>
</svg>

loading

<svg class="{{@root.prefix}}--loading__svg" viewBox="0 0 100 100">
    <title>Loading</title>
    {{#if small}}
    <circle class="{{@root.prefix}}--loading__background" cx="50%" cy="50%" r="42" />
    <circle class="{{@root.prefix}}--loading__stroke" cx="50%" cy="50%" r="42" />
    {{else}}
    <circle class="{{@root.prefix}}--loading__stroke" cx="50%" cy="50%" r="44" />
    {{/if}}
</svg>

Verified locally, can push up a PR if needed @emyarod

[emyarod]

yeah I've been examining it since @KJaspers latest comment together with #5367