[React 리액트] react-loading 라이브러리 - 로딩 스피너 만들기

react-loading 라이브러리를 이용하면 별도의 css코드를 입력하지 않아도 쉽게 로딩 애니메이션을 만들 수 있다.

 

📌 설치

npm 또는 yarn을 통해 라이브러리를 설치하여 사용한다.

 

✔ npm

npm i react-loading

✔ yarn

yarn add react-loading

 

📌 다양한 로딩 타입들

• blank
• balls
• bars
• bubbles
• cubes
• cylon
• spin
• spinningBubbles
• spokes

📌 데모 확인하기

 

📌 예시 코드

import React from 'react';
import ReactLoading from 'react-loading';
 
const Example = ({ type, color }) => (
    <ReactLoading type={type} color={color} height={667} width={375} />
);
 
export default Example;

---

🔗 출처

https://www.npmjs.com/package/react-loading

react-loading