Loading Indicator

The loading indicator shows the user that an external process, like a connection, is being executed.

Check the Lexicon Loading Indicator Pattern for a more in-depth look at the motivations and proper usage of this component.

{call ClayLoadingIndicator.render}
	{param small: true /}
{/call}

{call ClayLoadingIndicator.render /}

<clay-loading-indicator small="true"></clay-loading-indicator>
<clay-loading-indicator></clay-loading-indicator>

<span aria-hidden="true" class="loading-animation loading-animation-sm"></span>
<span aria-hidden="true" class="loading-animation"></span>

{call ClayLoadingIndicator.render /}

<clay-loading-indicator></clay-loading-indicator>

<span aria-hidden="true" class="loading-animation"></span>

{call ClayLoadingIndicator.render}
	{param light: true /}
{/call}

<clay-loading-indicator light="true"></clay-loading-indicator>

<span aria-hidden="true" class="loading-animation loading-animation-light"></span>