Loading Indicator
yarn add @clayui/loading-indicator
The loading indicator shows the user that an external process, like a connection, is being executed.
Stable3.60.0View in LexiconCHANGELOG
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.
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.
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 blue by setting the displayType to primary.
Secondary
Fix the color of the loading indicator to be gray by setting the displayType to secondary.
Light
Fix the color of the loading indicator to be white by setting the displayType to light. It allows the indicator to be more accessible in some cases.
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.
Small
Fix the loading indicator font-size to be 16px by setting the size property to sm.
Medium
Fix the loading indicator font-size to be 32px by setting the size property to md.
Large
Fix the loading indicator font-size to be 64px by setting the size property to lg.