Kuidas luua laadimisanimatsiooni React-spinneritega

Taasavaldanud Platon

järgijaid: 0

Sissejuhatus

Kui luua Reacti rakendusi, mis toovad sisu välistest allikatest, mille laadimine võtab veidi aega, on alati hea mõte pakkuda meeldivat kasutuskogemust kasutajate kaasamise ja laadijaga nende tähelepanu hoidmise kaudu, kuna see aitab kasutajatel toimuvast aru saada. kui jätta nad spekuleerima.

Selles juhendis õpime, kuidas kuvada laaduri animatsiooni rakenduse laadimisel ja sisu hankimisel välistest allikatest, kasutades react-spinners raamatukogu.

Selleks loome väikese rakenduse, mis tõmbab hinnapakkumisi ja millel on pakkumise toomise ajal laadimiskuva:

Kui soovite spinnerite nullist loomise kohta lisateavet, lugege meie artiklit "Kuidas luua laadimisanimatsiooni Reactis nullist"!

Näidisreaktsioonirakenduse loomine

Alustame oma Reacti märgistuse vaatamisega. Põhimõtteliselt on meil kaks <div> elemendid vanem <div> (lihtsuse huvides) – üks on loader-container ja teine on 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;

Seni oleme loonud ainult a <div> meie laaduri jaoks. Nüüd vaatame, kuidas saame selle lisada ja mõne sisu laadimisel käivitada.

Märge: Saate vaadata läbi see hoidla ja vajadusel kontrollige seda juhendit lugedes koodi.

React Spinnerite kasutamine meie rakenduses

react-spinner on paljude spinnerite kogum, mida saame kasutada oma Reacti rakendustes. React Spinneri kasutamiseks peame esmalt installima teegi oma projekti kataloogi, käivitades mis tahes järgmise käsu:

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

Kui see on tehtud, saame nüüd importida konkreetse laaduri, mida soovime kasutada (antud juhul a ClipLoader) ja määrake stiil, nagu suurus ja värv:

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 raamatukogul on palju kasulikke funktsioone, näiteks saame seda kasutada laadimise haldamiseks ilma kolmekomponentseid operaatoreid kasutamata:

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

Selle asemel, et kasutada kolmekordset operaatorit, et kuvada sisu väärtuse põhjal loadingInProgress muutuja, oleme lihtsalt kasutanud loading={loadingInProgress} asemel.

Samuti saame muuta kontrollimiseks kasutatavat CSS-i spinner-icon kasutades override atribuut:

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;