Simplify loading-animation icon

[jbalsas]

Currently, the loading spinner used in Liferay Portal uses the following markup:

<div class="loading-animation"></div>

The current implementation, however, requires the following markup:

<span class="loading-icon loading-icon-dotted">
    <span class="loading-icon-indicator"></span>
</span>

@marcoscv-work did some POC on what it meant updating it in https://github.com/jbalsas/liferay-portal/pull/937/files, and I don't think we can afford that amount of changes.

Is there an option to reduce our current implementation into the simpler markup?

[pat270]

@jbalsas I think this means we can't change the markup at all? I took a quick look at @marcoscv's pull and I think that should work if that is the case. I'll let you know.

[jbalsas]

I think, for this particular case it would be ideal if we can keep it the way it is to minify the upgrade efforts.

• Is there a strong reasoning for it to change? I assume the older format (just a class on any element) is easier to apply to any project than a specific loader markup.
• Would it make sense to support both markups for the 2.x version?

[pat270]

The main reason for the extra markup was to allow the loading icon to size based on font size, but using the after pseudo element solves that. I also thought we should change the component name to describe the animation better, but it's not really that important.