Loading Indicator

View in Lexicon

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

installyarn add @clayui/loading-indicator
versionNPM Version
useimport LoadingIndicator from '@clayui/loading-indicator';

Table of Contents

Shapes

The loading indicator takes on the currentColor and font-size by default.

Circle

The circle indicator is the default shape of the loading indicator. It should be used with small components such as badges, buttons, inputs, tables rows, etc.

It should be used with size xs and sm. The displayType should be secondary or light.
Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import LoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<LoadingIndicator displayType="secondary" size="sm" />
			</div>
		</Provider>
	);
}

Squares

The squares indicator uses 2 square shapes taken from the Liferay logo. It helps us include some details from the brand in our product interfaces. It should be used only for bigger components such as cards, modals, sidebars, dashboards, etc. Enable the squares indicator by setting the property shape to squares.

It should be used with size md and lg. The displayType should be primary or light.
Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import LoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<LoadingIndicator
					displayType="primary"
					shape="squares"
					size="md"
				/>
			</div>
		</Provider>
	);
}

Display Types

The loading indicator uses the currentColor by default. You can force the state/color on the loading indicator by passing one of the three variants, primary, secondary, and light, to the displayType property.

Primary

Fix the color of the loading indicator to be the primary color by setting the displayType to primary.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import LoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<LoadingIndicator
					displayType="primary"
					shape="squares"
					size="lg"
				/>
			</div>
		</Provider>
	);
}

Secondary

Fix the color of the loading indicator to be the secondary color by setting the displayType to secondary.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import LoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<LoadingIndicator displayType="primary" size="sm" />
			</div>
		</Provider>
	);
}

Light

Fix the color of the loading indicator to be the light color by setting the displayType to light. It allows the indicator to be more accessible in some cases.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import LoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<LoadingIndicator
					displayType="light"
					shape="squares"
					size="md"
				/>
			</div>
		</Provider>
	);
}

Sizes

The loading indicator ships with four sizes, xs, sm, md, and lg. It inherits the parent’s font-size by default.

Extra Small

Fix the loading indicator font-size to be 10px by setting the size property to xs.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import LoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<LoadingIndicator displayType="secondary" size="xs" />
			</div>
		</Provider>
	);
}

Small

Fix the loading indicator font-size to be 16px by setting the size property to sm.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import LoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<LoadingIndicator displayType="secondary" size="sm" />
			</div>
		</Provider>
	);
}

Medium

Fix the loading indicator font-size to be 32px by setting the size property to md.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import LoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<LoadingIndicator
					displayType="primary"
					shape="squares"
					size="md"
				/>
			</div>
		</Provider>
	);
}

Large

Fix the loading indicator font-size to be 64px by setting the size property to lg.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import LoadingIndicator from '@clayui/loading-indicator';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<LoadingIndicator
					displayType="primary"
					shape="squares"
					size="lg"
				/>
			</div>
		</Provider>
	);
}

API Reference

LoadingIndicator

React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLSpanElement>>
Parameters
Properties

displayType

"primary" | "secondary" | "light" | null | undefined

Determines the color of the visual indicator.

shape

"circle" | "squares" | null | undefined

Determines the style of the visual indicator.

size

"xs" | "sm" | "md" | "lg" | null | undefined

Determines the size of the visual indicator.

Deprecated

light

boolean | undefined

Flag to indicate the 'light' variant

Deprecated

small

boolean | undefined

Flag to indicate the small size

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub

Contributors

Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Patrick Yeo, Krešimir Čoko

Last edited May 11, 2025 at 5:57:01 PM

Table of Contents