React 스피너를 사용하여 React에서 로딩 애니메이션을 만드는 방법

플라톤에 의해 재발행

팔로워 : 0

개요

로드하는 데 시간이 걸리는 외부 소스에서 콘텐츠를 가져오는 React 애플리케이션을 만들 때 사용자를 참여시키고 로더로 관심을 유지하여 즐거운 사용자 경험을 제공하는 것이 항상 좋은 생각입니다. 그들이 추측하도록 내버려 두는 것보다.

이 가이드에서는 응용 프로그램을 로드하고 외부 소스에서 콘텐츠를 검색할 때 로더 애니메이션을 표시하는 방법을 배웁니다. react-spinners 도서관.

이를 위해 견적을 가져오는 동안 로딩 화면과 함께 견적을 가져오는 작은 애플리케이션을 빌드합니다.

스피너를 처음부터 만드는 방법에 대해 자세히 알아보려면 "처음부터 React에서 로딩 애니메이션을 만드는 방법"!

샘플 React 앱 만들기

React 마크업을 살펴보는 것으로 시작하겠습니다. 기본적으로 우리는 두 가지 <div> 의 요소 부모의 <div> (간단함을 위해) – 하나는 loader-container 두 번째는 main-content:

import React from 'react'; const App = () => { return ( <div className="container"> <div className="loader-container"> <div className="spinner"></div> </div> <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote"> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> - <span className="author">Rollo May</span> </div> </div> </div> );
}; export default App;

지금까지 우리는 <div> 우리 로더를 위해. 이제 일부 콘텐츠가 로드될 때 이를 추가하고 트리거하는 방법을 살펴보겠습니다.

참고 : 당신은 밖으로 확인하실 수 있습니다 이 저장소 이 가이드를 읽는 동안 필요한 경우 코드를 교차 확인하십시오.

애플리케이션에서 React Spinner 사용하기

react-spinner React 애플리케이션에서 사용할 수 있는 많은 스피너 모음입니다. React 스피너를 사용하려면 먼저 다음 명령 중 하나를 실행하여 프로젝트 디렉토리에 라이브러리를 설치해야 합니다.

$ npm install --save react-spinners
// Or
$ yarn add react-spinners

완료되면 이제 사용하려는 특정 로더를 가져올 수 있습니다(이 경우 ClipLoader) 크기 및 색상과 같은 스타일을 설정합니다.

import React, { useState, useEffect } from 'react';
import ClipLoader from 'react-spinners/ClipLoader'; const App = () => { const [loadingInProgress, setLoading] = useState(false); <!-- ... --> return ( <div className="container"> {loadingInProgress ? ( <div className="loader-container"> <ClipLoader color={'#fff'} size={150} /> </div> ) : ( <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote" onClick={getRandomQuote}> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote">{quote.content}</blockquote>-{' '} <span className="author">{quote.author}</span> </div> </div> )} </div> );
}; export default App;

XNUMXD덴탈의 react-spinner 라이브러리에는 유용한 기능이 많이 있습니다. 예를 들어 삼항 연산자를 사용하지 않고 로드를 처리하는 데 사용할 수 있습니다.

<ClipLoader color={'#fff'} loading={loadingInProgress} size={150} />

삼항 연산자를 사용하여 값에 따라 내용을 표시하는 대신 loadingInProgress 변수, 우리는 단순히 loading={loadingInProgress} 대신.

제어에 사용되는 CSS를 변경할 수도 있습니다. spinner-icon 를 사용하여 override 속성:

import { useState } from "react";
import { css } from "@emotion/react";
import ClipLoader from "react-spinners/ClipLoader"; const override = css` display: block; margin: 0 auto; border-color: red;
`; function App() { let [loadingInProgress, setLoading] = useState(true); return ( <div className="container"> <ClipLoader color={'#fff'} loading={loadingInProgress} css={override} size={150} /> // ... </div> );
} export default App;