Loading
The Loading component provides a spinning animation that can give a visual clue that the application is loading data.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { Loading } from '@adaptavant/eds-core';
Tone
The Loading component is available in 6 tones, accentPrimary is the default.
{/* accentPrimary */}
<Loading tone="accentPrimary" />
{/* neutralPrimary */}
<Loading tone="neutralPrimary" />
{/* onPrimary */}
<Loading tone="onPrimary" />
{/* criticalPrimary */}
<Loading tone="criticalPrimary"/>
{/* critical-onPrimary */}
<Loading tone="critical-onPrimary"/>
{/* inverse */}
<Loading tone="inverse"/>
Size
The Loading component is available in five sizes, with 24 as the default.
{/* size: 16 */}
<Loading size="16" />
{/* size: 20 */}
<Loading size="20" />
{/* size: 24 */}
<Loading size="24" />
{/* size: 48 */}
<Loading size="48" />
{/* size: 80 */}
<Loading size="80" />
Icon
The Loading can be rendered with a dedicated <GrowYourBrandIcon /> or <SetmoreIcon /> icon. It will only appear in two size variants: '48' and '80'.
{/* Icon will not appear for small loadging sizes */}
<Loading />
{/* SetmoreIcon for size '48' variant will appear by default */}
<Loading size="48" />
{/* GrowYourBrandIcon for size '48' */}
<Loading size="48" icon="growYourBrandIcon" />
{/* SetmoreIcon for size '80' variant will appear by default */}
<Loading size="80" />
{/* GrowYourBrandIcon for size '80' */}
<Loading size="80" icon="growYourBrandIcon" />
{/* Icon inside spinner will fit to the differnet tones */}
<Loading size="80" tone="criticalPrimary" />In rare cases, you can prevent the <SetmoreIcon /> or <GrowYourBrandIcon /> from rendering inside the spinner for the '48' and 80 size variants by setting the icon prop to 'none'. We do not recommend to remove it.
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
Loading parts
{/* Styling circle part without icon */}
<Loading classNames={{circle: 'fill-inverse'}}/>
{/* Styling the icon and circle-path */}
<Loading
size="48"
classNames={{
icon: 'fill-critical',
'circle-path': 'stroke-[4px]',
}}
/>Stylable Parts | Description |
|---|---|
icon | The icon (like |
circle | The main |
circle-path | The |