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

Ponovno objavil Platon

Spremljevalci: 0

Predstavitev

Ko ustvarjate aplikacije React, ki pridobivajo vsebino iz zunanjih virov, ki vzamejo nekaj časa za nalaganje, je vedno dobro zagotoviti prijetno uporabniško izkušnjo tako, da pritegnete uporabnike in ohranite njihovo pozornost z nalagalnikom, saj to uporabnikom pomaga razumeti, kaj se dogaja. kot da jih pustimo špekulirati.

V tem priročniku se bomo naučili, kako prikazati animacijo nalagalnika pri nalaganju aplikacije in pridobivanju vsebine iz zunanjih virov z uporabo react-spinners knjižnica.

V ta namen – zgradili bomo majhno aplikacijo, ki pridobiva ponudbe, z nalagalnim zaslonom, medtem ko se ponudba pridobiva:

Če želite izvedeti več o ustvarjanju vrtavk iz nič, preberite naše »Kako ustvariti nalagalno animacijo v Reactu iz nič«!

Ustvarjanje vzorčne aplikacije React

Začnimo z ogledom naše oznake React. V bistvu imamo dva <div> elementi v od staršev <div> (zaradi poenostavitve) – eden je loader-container in drugi je 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;

Doslej smo ustvarili le a <div> za našega nakladalca. Zdaj pa poglejmo, kako ga lahko dodamo in sprožimo, ko se nekaj vsebine naloži.

Opomba: Lahko preverite to odlagališče in med branjem tega vodnika po potrebi navzkrižno preverite kodo.

Uporaba vrtavk React v naši aplikaciji

react-spinner je zbirka številnih vrtavk, ki jih lahko uporabimo v naših aplikacijah React. Za uporabo React spinnerja moramo knjižnico najprej namestiti v imenik našega projekta, tako da zaženemo katerega koli od naslednjih ukazov:

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

Ko je to storjeno, lahko uvozimo določen nalagalnik, ki ga želimo uporabiti (v tem primeru a ClipLoader) in nastavite nekaj stilov, kot sta velikost in barva:

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;

O react-spinner knjižnica ima veliko uporabnih funkcij, na primer, lahko jo uporabimo za upravljanje nalaganja brez uporabe ternarnih operaterjev:

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

Namesto uporabe ternarnega operaterja za prikaz vsebine na podlagi vrednosti loadingInProgress spremenljivko, smo preprosto uporabili loading={loadingInProgress} namesto tega.

Prav tako lahko spremenimo CSS, ki se uporablja za nadzor spinner-icon z uporabo an 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;