Loading

로딩을 원형으로 보여주는 컴포넌트입니다. 여러가지 설정을 통해 스타일을 줄 수 있습니다.

export function LoadingBasic(){
  return <Frame>
    <Loading 
    width={100} 
    height={100}
    baseColor="lightgray"
    primaryColor="red"
    thickness={7} 
    />
  </Frame>
}

속성 설명

width

width = CSSProperties['width']

로딩 박스의 폭을 설정합니다. 유의해야할 점은 이 값은 원의 크기가 아니라는 점입니다. 원의 크기는 이 값의 50% 로 설정됩니다.

height

height = CSSProperties['height']

로딩 박스의 높이를 설정합니다. width 와 같은 특성을 가집니다.

baseColor

baseColor = CSSProperties['backgroundColor']

원의 배경색을 설정합니다.

primaryColor

primaryColor = CSSProperties['backgroundColor']

원 내에서 도는 부분의 색상을 설정합니다.

thickness

thickness = number

원의 두께를 지정합니다. number 는 픽셀로 처리됩니다.

speed

speed = number

원이 한바퀴 도는 속도를 정합니다. 단위는 초입니다.

mode

mode = LoadingMode = 'linear' | 'ease'

애니메이션의 mode 입니다. 원이 도는 가속도 타입을 정할 수 있습니다.