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
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.
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 > Show code 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
); Show code Edit this page on GitHub Contributors
Matuzalém Teles
Last edited May 9, 2025 at 6:15:38 AM
