How To Create A Loading Animation In React With React-spinners

Republicat de Platon

Urmaritori: 0

Introducere

Atunci când creați aplicații React care preiau conținut din surse externe care durează ceva timp pentru a se încărca, este întotdeauna o idee bună să oferiți o experiență plăcută utilizatorului prin implicarea utilizatorilor și păstrându-le atenția cu un încărcător, deoarece acest lucru îi ajută pe utilizatori să înțeleagă mai degrabă ce se întâmplă. decât să-i lase să speculeze.

În acest ghid, vom învăța cum să afișam animația de încărcare atunci când încărcăm o aplicație și preluăm conținut din surse externe, utilizând react-spinners bibliotecă.

În acest scop – vom construi o mică aplicație care preia ghilimele, cu un ecran de încărcare în timp ce un citat este preluat:

Dacă doriți să aflați mai multe despre crearea de spinner de la zero, citiți-ne „Cum se creează o animație de încărcare în React de la zero”!

Crearea unui exemplu de aplicație React

Să începem prin a ne uita la marcajul nostru React. Practic, avem două <div> elemente din mamă <div> (de dragul simplității) – unul este loader-container iar al doilea este 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;

Până acum, am creat doar un <div> pentru încărcătorul nostru. Acum, să vedem cum îl putem adăuga și declanșa atunci când se încarcă un anumit conținut.

Notă: Puteţi verifica acest depozit și verificați codul dacă este necesar în timp ce citiți acest ghid.

Utilizarea React Spinners în aplicația noastră

react-spinner este o colecție de multe spinneri pe care le putem folosi în aplicațiile noastre React. Pentru a folosi React spinner, trebuie mai întâi să instalăm biblioteca în directorul proiectului nostru, rulând oricare dintre următoarele comenzi:

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

Odată ce s-a terminat, acum putem importa încărcătorul pe care vrem să-l folosim (în acest caz, a ClipLoader) și setați un stil, cum ar fi dimensiunea și culoarea:

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;

react-spinner biblioteca are o mulțime de caracteristici utile, de exemplu, o putem folosi pentru a gestiona încărcarea fără a folosi operatori ternari:

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

În loc să utilizați operatorul ternar pentru a afișa conținutul pe baza valorii lui loadingInProgress variabilă, pur și simplu am folosit loading={loadingInProgress} in schimb.

De asemenea, putem modifica CSS-ul folosit pentru a controla spinner-icon prin utilizarea unui override atribut:

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;

Notă: Putem citi mai multe despre react-spinner în documentaţie, unde putem vedea și o listă de păcătoși disponibili.

Concluzie

În acest scurt ghid, am aruncat o privire asupra modului în care puteți utiliza react-spinners pentru a adăuga un spinner de încărcare la un element din React.

Timestamp-ul: 7 Iunie, 2022