So erstellen Sie eine Ladeanimation in React mit React-Spinnern

Neuauflage von Plato

Verfolger: 0

Einleitung

Beim Erstellen von React-Anwendungen, die Inhalte aus externen Quellen abrufen, deren Laden einige Zeit in Anspruch nimmt, ist es immer eine gute Idee, eine angenehme Benutzererfahrung zu bieten, indem Sie die Benutzer einbeziehen und ihre Aufmerksamkeit mit einem Loader aufrechterhalten, da dies den Benutzern hilft, besser zu verstehen, was vor sich geht als sie spekulieren zu lassen.

In diesem Handbuch erfahren Sie, wie Sie die Ladeanimation anzeigen, wenn Sie eine Anwendung laden und Inhalte von externen Quellen abrufen, indem Sie die verwenden react-spinners Bibliothek.

Zu diesem Zweck erstellen wir eine kleine Anwendung, die Angebote abruft, mit einem Ladebildschirm, während ein Angebot abgerufen wird:

Wenn Sie mehr über das Erstellen von Spinnern von Grund auf erfahren möchten, lesen Sie unsere „So erstellen Sie eine Ladeanimation in React from Scratch“!

Erstellen einer Beispiel-React-App

Sehen wir uns zunächst unser React-Markup an. Grundsätzlich haben wir zwei <div> Elemente in der Elternteil <div> (der Einfachheit halber) – man ist der loader-container und das zweite ist das 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;

Bisher haben wir nur eine erstellt <div> für unseren Lader. Sehen wir uns nun an, wie wir es hinzufügen und auslösen können, wenn Inhalte geladen werden.

Hinweis: Sie können sich aus dieses Repository und überprüfen Sie den Code bei Bedarf, während Sie diese Anleitung lesen.

Verwenden von React Spinnern in unserer Anwendung

react-spinner ist eine Sammlung vieler Spinner, die wir in unseren React-Anwendungen verwenden können. Um den React-Spinner zu verwenden, müssen wir zuerst die Bibliothek im Verzeichnis unseres Projekts installieren, indem wir einen der folgenden Befehle ausführen:

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

Sobald dies erledigt ist, können wir nun den jeweiligen Loader importieren, den wir verwenden möchten (in diesem Fall a ClipLoader) und legen Sie ein Styling wie Größe und Farbe fest:

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;

Das react-spinner Die Bibliothek hat viele nützliche Funktionen, zum Beispiel können wir sie verwenden, um das Laden ohne Verwendung von ternären Operatoren zu handhaben:

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

Anstatt den ternären Operator zu verwenden, um den Inhalt basierend auf dem Wert von anzuzeigen loadingInProgress Variable haben wir einfach verwendet loading={loadingInProgress} stattdessen.

Wir können auch das CSS ändern, das zur Steuerung von verwendet wird spinner-icon mit einem override Attribut:

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;

Hinweis: Wir können mehr darüber lesen react-spinner der Dokumentation, wo wir auch eine Liste der verfügbaren Sünder sehen können.

Zusammenfassung

In dieser kurzen Anleitung haben wir uns angesehen, wie Sie es verwenden können react-spinners um einem Element in React einen Lade-Spinner hinzuzufügen.

Zeitstempel: 7. Juni 2022