Loading Indicator

yarn add @clayui/loading-indicator

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

Stable 3.1.0 View in Lexicon CHANGELOG

Light
Small
API

Code Sample (expand to see it)

Light

Use light property for setting the loading indicator to be more accessible in some cases.

Code Sample (expand to see it)

Small

By default, the loading indicator is sized 16px but if you want a smaller version, you can try using the small property.

Code Sample (expand to see it)

API

Property	Type	Required	Default	Description
light	boolean	false		Flag to indicate the 'light' variant
small	boolean	false		Flag to indicate the small size

Sizes
Variations
- Regular
- Light
Compositions
- Button
- Autocomplete

These animations are made using only CSS.

Sizes

Code Sample (expand to see it)

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

Variations

Regular

Code Sample (expand to see it)

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

Light

Code Sample (expand to see it)

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

Compositions

Button

Code Sample (expand to see it)

<button class="btn btn-primary" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-secondary" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-success" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-info" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-warning" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-danger" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-light" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-dark" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>

<button class="btn btn-link" type="button">
	<span class="inline-item inline-item-before">
		<span aria-hidden="true" class="loading-animation"></span> </span
	>Loading
</button>