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' ;
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.
import {Provider } from '@clayui/core' ;
import LoadingIndicator from '@clayui/loading-indicator' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/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.
import {Provider } from '@clayui/core' ;
import LoadingIndicator from '@clayui/loading-indicator' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/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.
import {Provider } from '@clayui/core' ;
import LoadingIndicator from '@clayui/loading-indicator' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/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.
import {Provider } from '@clayui/core' ;
import LoadingIndicator from '@clayui/loading-indicator' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/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.
import {Provider } from '@clayui/core' ;
import LoadingIndicator from '@clayui/loading-indicator' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4 bg-dark" >
<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.
Fix the loading indicator font-size to be 10px by setting the sizexs.
import {Provider } from '@clayui/core' ;
import LoadingIndicator from '@clayui/loading-indicator' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/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 sizesm.
import {Provider } from '@clayui/core' ;
import LoadingIndicator from '@clayui/loading-indicator' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/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 sizemd.
import {Provider } from '@clayui/core' ;
import LoadingIndicator from '@clayui/loading-indicator' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/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 sizelg.
import {Provider } from '@clayui/core' ;
import LoadingIndicator from '@clayui/loading-indicator' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/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 "secondary" | "primary" | "light" | null | undefined
Determines the color of the visual indicator.
shape "circle" | "squares" | null | undefined
Determines the style of the visual indicator.
size "sm" | "lg" | "xs" | "md" | 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
