react-loader-spinner 사용법

react-loader-spinner가 무엇인가요?

react-spinner-loader는 데이터가 보기에 로드되기 전에 async await 작업을 위해 구현할 수 있는 간단한 React SVG 스피너 구성 요소를 제공합니다.

react-loader-spinner 사용법.

선호하는 종속성 관리자를 사용하여 라이브러리를 설치할 수 있습니다.
원사 사용:
yarn add react-loader-spinner
npm 사용:
npm install react-loader-spinner --save
다음은 반응 애플리케이션에서 react-loader-spinner를 사용하는 방법에 대한 코드의 몇 가지 예입니다.

첫째, 필요한 CSS를 가져옵니다. css를 기본app.js 파일로 가져옵니다.

코드 샘플:

import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";

그 다음에:

import { Audio } from  'react-loader-spinner'


<Audio
    height="100"
    width="100"
    color='grey'
    ariaLabel='loading'
  />

참고: 웹팩에서 css 문제가 발생하는 경우. (이 패키지의 이전 버전용). 웹팩 구성을 다음과 같이 변경합니다. test: /\.scss$/ to test: /\.s?css$/
최신 버전은 노드 모듈에서 css 파일을 가져옵니다app.js.

react-loader-spinner 유형 및 구현

여기의 오디오는 구현 샘플입니다: <Audio color="#00BFFF" height={80} width={80} />

여기 BallTriangle은 구현 코드 샘플입니다. <BallTriangle color="#00BFFF" height={80} width={80} />

여기의 바는 구현 코드 샘플입니다: <Bars color="#00BFFF" height={80} width={80} />

여기 Circles는 구현 코드 샘플입니다: <Circles color="#00BFFF" height={80} width={80}/>

여기서 그리드는 구현 코드 샘플입니다: <Grid color="#00BFFF" height={80} width={80} />

Hearts는 구현 코드 샘플입니다. <Hearts color="#00BFFF" height={80} width={80} />

Oval은 구현 코드 샘플입니다. <Oval color="#00BFFF" height={80} width={80} />

Puff는 구현 코드 샘플입니다. <Puff color="#00BFFF" height={80} width={80} />

Rings는 구현 코드 샘플입니다. <Rings color="#00BFFF" height={80} width={80} />

여기 TailSpin은 구현 코드 샘플입니다. <TailSpin color="#00BFFF" height={80} width={80} />

ThreeDots는 구현 코드 샘플입니다. <ThreeDots color="#00BFFF" height={80} width={80} />

참고: Safari에서는 링 스피너가 지원되지 않습니다.

Check the demo here



읽어 주셔서 감사합니다...

행복한 코딩!