Loading Indicator

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

install	yarn add @clayui/loading-indicator
version
use	`import LoadingIndicator from '@clayui/loading-indicator';`

These animations are made using only CSS.

Loading Animation

This component received a breaking style update. Please see

reverting to the Dotted Loading Animation

for instructions on how to revert it.

The loading-animation indicator is to be used with small components such as badges, buttons, inputs, tables rows, etc. This component takes on the currentColor and font-size.

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

Loading Animation Squares

The loading-animation-squares indicator uses 2 square shapes taken from the Liferay logo. It helps us include some details from the brand in our product interfaces. Use this indicator only for bigger components such as cards, modals, sidebars, dashboards, etc. This component takes on the currentColor and the current font-size.

<span
	aria-hidden="true"
	className="loading-animation-squares loading-animation-lg loading-animation-primary"
></span>

Sizes

The Loading Animation components ship with four sizes. The Sass map, $loading-animation-sizes, accepts additional maps to output more sizes if needed.

Extra Small

The modifier class loading-animation-xs forces the loading animation indicator size to be 10px.

<span
	aria-hidden="true"
	className="loading-animation loading-animation-secondary loading-animation-xs"
></span>

Small

The modifier class loading-animation-sm forces the Loading Animation indicator size to be 16px.

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

Medium

The modifier class loading-animation-md forces the Loading Animation indicator size to be 32px.

<span
	aria-hidden="true"
	className="loading-animation-squares loading-animation-primary loading-animation-md"
></span>

Large

The modifier class loading-animation-lg forces the Loading Animation indicator size to be 64px.

<span
	aria-hidden="true"
	className="loading-animation-squares loading-animation-primary loading-animation-lg"
></span>

Variations

The Loading Animation component has three variants, primary, secondary, and light. The Sass map, $loading-animation-palette, accepts additional maps to output more variants if needed.

Primary

The modifier class loading-animation-primary forces the Loading Animation indicator color to be $primary.

<span
	aria-hidden="true"
	className="loading-animation-squares loading-animation-md loading-animation-primary"
></span>

Secondary

The modifier class loading-animation-secondary forces the Loading Animation indicator color to be $secondary.

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

Light

The modifier class loading-animation-light forces the Loading Animation indicator color to be white.

<span
	aria-hidden="true"
	className="loading-animation loading-animation-sm loading-animation-light"
></span>
<span
	aria-hidden="true"
	className="loading-animation-squares loading-animation-md loading-animation-light"
></span>

Compositions

Button

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

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

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

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

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

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

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

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

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

Reverting to the Dotted Animation

Copy and paste the code below into your _clay_variables.scss file.

$btn-primary: (
	loading-animation: 'loading-animation-light'
) !default;

$btn-success: (
	loading-animation: 'loading-animation-light'
) !default;

$btn-info: (
	loading-animation: 'loading-animation-light'
) !default;

$btn-warning: (
	loading-animation: 'loading-animation-light'
) !default;

$btn-danger: (
	loading-animation: 'loading-animation-light'
) !default;

$btn-dark: (
	loading-animation: 'loading-animation-light'
) !default;

$loading-icon-font-size: 2.5rem !default;

$loading-icon-font-size-sm: 1.25rem !default;

$loading-animation: (
	mixin-name: 'clay-loading-animation-variant',
	animation: clay-unset,
	ball-0-color: rgba(#6b6c7e, 1),
	ball-1-color: rgba(#6b6c7e, 0.8),
	ball-2-color: rgba(#6b6c7e, 0.6),
	ball-3-color: rgba(#6b6c7e, 0.4),
	ball-4-color: rgba(#6b6c7e, 0.2),
	ball-5-color: rgba(#6b6c7e, 0.1),
	display: block,
	font-size: $loading-icon-font-size,
	height: 1em,
	margin-left: auto,
	margin-right: auto,
	position: relative,
	text-align: left,
	vertical-align: middle,
	width: 1em,
	before: (),
	after: (
		animation: 1.2s ease-out infinite,
		animation-name: loading-animation,
		background-color: clay-unset,
		border-radius: 50%,
		color: #6b6c7e,
		content: '',
		display: block,
		height: 1em,
		left: 0,
		-webkit-mask: clay-unset,
		-webkit-mask-composite: clay-unset,
		mask-composite: clay-unset,
		padding: clay-unset,
		position: absolute,
		top: 0,
		transform: scale(0.33334),
		width: 1em
	)
) !default;

$loading-animation-sizes: (
	loading-animation-sm: (
		font-size: $loading-icon-font-size-sm
	)
) !default;

$loading-animation-palette: () !default;
$loading-animation-palette: map-deep-merge(
	(
		'%loading-animation-light': (
			mixin-name: 'clay-loading-animation-variant',
			ball-0-color: rgba(#fff, 1),
			ball-1-color: rgba(#fff, 0.8),
			ball-2-color: rgba(#fff, 0.6),
			ball-3-color: rgba(#fff, 0.4),
			ball-4-color: rgba(#fff, 0.2),
			ball-5-color: rgba(#fff, 0.1),
			after: (
				animation-name: loading-animation-light,
				color: #fff
			)
		),
		'.loading-animation.loading-animation-light': (
			mixin-name: 'clay-loading-animation-variant',
			ball-0-color: rgba(#fff, 1),
			ball-1-color: rgba(#fff, 0.8),
			ball-2-color: rgba(#fff, 0.6),
			ball-3-color: rgba(#fff, 0.4),
			ball-4-color: rgba(#fff, 0.2),
			ball-5-color: rgba(#fff, 0.1),
			after: (
				animation-name: loading-animation-light,
				color: #fff
			)
		)
	),
	$loading-animation-palette
);

Edit this page on GitHub

Contributors

Table of Contents

Loading Animation
Loading Animation Squares
Sizes
Extra Small
Small
Medium
Large
Variations
Primary
Secondary
Light
Compositions
Button
Reverting to the Dotted Animation