[React] Three Dots 로딩 라이브러리 소개

See the Pen Untitled by Aierse (@Aierse) on CodePen.

 

 

매번 로딩바를 구현할 필요없이 로딩 애니메이션을 제공하는 리액트 라이브러리를 소개합니다.

react-spinner는 로딩 애니메이션이 적용된 컴포넌트들을 제공합니다.

 

1. 설치

npm i @aierse/react-spinner

 

2. 사용법

import Spinner from "@aierse/react-spinner"

function Example() {
  
  return (
    <>
      {/* Bricks 애니메이션 */}
      <Spinner.Bricks open={true} diameter={20}/>
      {/* Spin 애니메이션 */}
      <Spinner.Spin open={true} color={"#ff2c2c"} />
      {/* Collision 애니메이션 */}
      <Spinner.Collision open={true} />
    </>
  )
}

 

라이브러리는 총 9개의 애니메이션을 제공하고 있습니다. 다른 애니메이션도 모두 동일한 방법으로 사용합니다.

 

애니메이션 뿐만 아니라 로딩이 활성화된 동안, 로딩 아래 DOM과의 상호작용을 차단합니다.

로딩 중 클릭, 타이핑 등을 차단해 버그를 방지합니다.

2-1. 속성

• open: boolean = 로딩창 제어
• diameter: number = Dots의 지름 (크기)
• color: string = Dots 색상

색상과 크기를 커스텀할 수 있습니다.

반응형

마치며...

리액트 로딩 라이브러리에 대해서 알아보았습니다.

매번 구현할 필요없이 설치하여 사용할 수 있고 색상과 크기를 커스터마이징할 수 있습니다.

추천 포스트

[Modern][리액트] 한국인이 만든 국산 모달 소개

[React] 컴포넌트 인터페이스 개요 - 모듈 설계