Loading
데이터를 불러오거나 시스템이 처리 중일 때 사용하여 작업이 진행 중임을 시각적으로 알립니다. 로딩 중에는 사용자의 추가적인 입력을 막아 데이터 충돌이나 중복 요청과 같은 오류를 방지하는 역할을 합니다.
화면을 불러올 때 사용합니다.
import { Loading } from '@wanteddev/wds';
const Demo = () => {
return (
<Loading variant="circular" />
);
}
export default Demo;2가지 variant를 사용할 수 있습니다.
wanted: 2초 이상 로드할 때 사용합니다.circular: 로드 시간이 적은 일반적인 상황에서 사용합니다.
import { Loading, FlexBox } from '@wanteddev/wds';
const Demo = () => {
return (
<FlexBox alignItems="center" gap="16px">
<Loading variant="wanted" />
<Loading variant="circular" />
</FlexBox>
);
}
export default Demo;width와 height를 size로 지정할 수 있습니다.
import { Loading, FlexBox } from '@wanteddev/wds';
const Demo = () => {
return (
<FlexBox alignItems="center" gap="16px">
<Loading size="50px" variant="circular" />
<Loading size="1em" variant="circular" />
</FlexBox>
);
}
export default Demo;정해진 breakpoint에 따라 아래 옵션을 override 할 수 있습니다.
- size