10. react-spinners 이용하여 로딩 컴포넌트 만들기

react bootstrap에도 스피너가 있긴 한데 더 다양한 모양의 스피너가 있는 react-spinners 라이브러리를 이용하여 만들어 보았다.

 

우선 둘 중 하나의 명령어를 사용하여 설치를 해주자.

npm install react-spinners --save

yarn add react-spinners

 

그리고 파일을 하나 만들고 다음의 페이지에서 맘에 드는 스피너를 선택하여 코드를 복붙하면 된다.

색상과 크기, 속도 등 다양한 옵션들을 설정 가능하다.

Webpack App

 

import React from "react";
import { FadeLoader } from "react-spinners";

function Loading() {
  return (
    <div
      style={{
        position: "fixed",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
      }}
    >
      <FadeLoader color="#ababd9" width={5} />
    </div>
  );
}

export default Loading;

<style> 태그는 스피너를 화면 중앙에 놓기 위해 저렇게 설정하였다.