Introductie

Bij het maken van React-applicaties die inhoud ophalen van externe bronnen die enige tijd nodig hebben om te laden, is het altijd een goed idee om een ​​prettige gebruikerservaring te bieden door gebruikers te betrekken en hun aandacht vast te houden met een loader, omdat dit gebruikers helpt te begrijpen wat er aan de hand is in plaats van dan ze te laten speculeren.

In deze handleiding leren we hoe u loader-animatie kunt weergeven bij het laden van een toepassing en het ophalen van inhoud van externe bronnen. We gebruiken zowel een GIF-spinner als een geheel nieuwe spinner maken met CSS.

Daartoe bouwen we een kleine applicatie die offertes ophaalt, met een laadscherm terwijl een offerte wordt opgehaald:

Als u meer wilt weten over react-spinners – een bibliotheek met kant-en-klare spinners, lees onze "Hoe maak je een laadanimatie in React met react-spinners"!

Een React-voorbeeldapp maken

Laten we beginnen met te kijken naar onze React-markeringen. In principe hebben we er twee <div> elementen in de ouder <div> (voor de eenvoud) - een is de loader-container en de tweede is de 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;

Tot nu toe hebben we alleen een <div> voor onze lader. Nu kunnen we de verschillende methoden verkennen om een ​​loader te verkrijgen, evenals hoe we deze kunnen stylen om op een component te verschijnen, of zelfs om deze over het hele scherm te laten verschijnen.

Opmerking: U kunt kijken op deze repository en controleer de code indien nodig tijdens het lezen van deze handleiding.

Maak een Loader-animatie met React – GIF en CSS

Het eerste dat we moeten doen voordat we een loader-animatie in React implementeren, is om de animatie zelf te maken. Er zijn verschillende manieren waarop we dat kunnen doen, maar in dit artikel zullen we er twee bekijken: GIF animaties en CSS-animaties.

Een Loader-animatie maken met GIF's

A GIF is een geanimeerd beeld dat zichzelf oneindig (kan) herhalen zonder te pauzeren. Het kan met elke GIF maker of helemaal opnieuw met ontwerptools. In deze gids gaan we zal deze GIF gebruiken en laat het verschijnen als de achtergrond van de loader-container:

.loader-container {
    width: 100%;
    height: 100vh;
    position: fixed;
    background: rgba(0, 0, 0, 0.834)
        url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center
        no-repeat;
    z-index: 1;
}

Opmerking: U kunt dezelfde GIF ook op andere elementen toepassen om de reikwijdte van de animatie te lokaliseren.

De bovenstaande code helpt ons bij het maken van een zwarte achtergrond die het hele scherm bedekt voordat we ons loader-pictogram in het midden plaatsen. Wanneer we onze applicatie uitvoeren, wordt de loader-container staat nu bovenaan omdat we de z-index naar 1:

Super goed! We hebben een laadscherm gemaakt met a GIF afbeelding als de lader. Er zijn talloze andere manieren waarop we onze kleding kunnen stylen loader-container voor verschillende effecten. Laten we nu kijken hoe we deze lader met CSS kunnen maken, waarbij we het gebruik van externe afbeeldingen vermijden, wat een last kan zijn in termen van laadtijden.

Een Loader-animatie maken met CSS

CSS is een expressieve taal waarmee we een verscheidenheid aan stijlen kunnen uitvoeren, zoals het tekenen van vormen, het beschrijven van de relatieve volgorde van elementen en hun kenmerken, het toevoegen van afbeeldingen en zelfs het animeren ervan op basis van onze behoeften. Laten we het heel simpel maken spinner lader.

Weet je nog dat we een spinner hadden <div> in de container in onze load-container opmaak? Hoewel we het niet eerder hebben gebruikt, zullen we het nu gebruiken om het pictogram op te maken en vervolgens de load-container om het laderpictogram te centreren:

.loader-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    background: rgba(0, 0, 0, 0.834);
    z-index: 1;
}

.spinner {
    width: 64px;
    height: 64px;
    border: 8px solid;
    border-color: #3d5af1 transparent #3d5af1 transparent;
    border-radius: 50%;
    animation: spin-anim 1.2s linear infinite;
}

@keyframes spin-anim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Met CSS kunnen we nauwkeuriger afstemmen hoe de animatie wordt gedaan. Hier hebben we de GIF van eerder opnieuw gemaakt! Tot nu toe hebben we twee belangrijke benaderingen besproken voor het maken van loader-animatie. Laten we nu eens kijken hoe we ze in actie kunnen brengen.

Een laadanimatie maken in React

De laadanimatie in React verschilt van hoe het in JavaScript wordt gedaan omdat we nu de . gebruiken staat en ternaire operators om te bepalen wanneer de lader verschijnt en verdwijnt. We zullen ook de gebruiken useEffect() hook om ervoor te zorgen dat een lader gedurende een vooraf bepaalde tijd verschijnt terwijl onze app wordt geladen. De eerste stap is om beide relevante haken te importeren, gevolgd door het creëren van onze laadstatus:

import React, { useState, useEffect } from 'react';

const App = () => {
  const [loading, setLoading] = useState(false);

  return (
       <!-- ... -->
  );
};

export default App;

Opmerking: De staat is ingesteld op false standaard in de bovenstaande code, en we kunnen het veranderen in true wanneer we willen de loader-container verschijnen.

Gebruik om te beginnen de setTimeout() methode om de lader gedurende 2 seconden te laten verschijnen terwijl de pagina wordt weergegeven. Deze time-out simuleert een dure API-aanroep die tijd kost om resultaten te retourneren:

import React, { useState, useEffect } from 'react';

const App = () => {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div className="container">

    </div>
  );
};

export default App;

Dit betekent dat wanneer onze app wordt weergegeven, onze loader-container moet gedurende 2 seconden worden weergegeven. We kunnen een ternaire operator gebruiken om onze loader-container en geef de animatie weer in deze time-outperiode:

import React, { useState, useEffect } from 'react';

const App = () => {
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div className="container">
      {loading ? (
        <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">{quote.content}</blockquote>-{' '}
            <span className="author">{quote.author}</span>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;

. loading is ingesteld op true, zal de ternaire operator in de voorgaande code de . weergeven loader-container. Anders zal het de . weergeven main-content.

Als u meer wilt lezen over ternaire operatoren, lees dan onze "Gids voor de ternaire operator in JavaScript"!

Een laadanimatie implementeren bij het aanvragen van inhoud van een API

Een ander scenario waarin mensen een laadanimatie in React gebruiken, is bij het laden van inhoud van een externe bron, omdat deze gegevens extern zijn en de levering ervan wordt beïnvloed door een verscheidenheid aan externe gebeurtenissen, naast de verwachte verwerkingstijden.

Laten we een willekeurige quote opvragen bij de Random Quotes API en deze opslaan in de staat, waarna we ze op het scherm tonen. Telkens wanneer we een verzoek sturen, loading staat zal worden ingesteld op true. Zodra de inhoud is opgehaald, zetten we deze terug op false, de animatie stoppen:

import React, { useState, useEffect } from 'react';

const App = () => {
  const [loading, setLoading] = useState(false);
  const [quote, setQuote] = useState({});

  const getRandomQuote = () => {
    setLoading(true);
    fetch('https://api.quotable.io/random')
      .then((res) => res.json())
      .then((data) => {
        setLoading(false);
        setQuote(data);
      });
  };

  return (
    <div className="container">
      {loading ? (
        <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" 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;

We hebben helemaal opnieuw een responsieve spinner gemaakt! Als alternatief kunt u de react-spinner bibliotheek, die een breed scala aan loader-animaties heeft.

Als u meer wilt weten over react-spinners – een bibliotheek met kant-en-klare spinners, lees onze "Hoe maak je een laadanimatie in React met react-spinners"!

Conclusie

In deze handleiding hebben we geleerd hoe we een laadanimatie aan onze React-toepassing kunnen toevoegen met behulp van twee verschillende benaderingen. We hebben een eenvoudige GIF geïmporteerd en een geheel nieuwe spinner gemaakt met CSS. Ten slotte hebben we bekeken hoe we de animatie kunnen integreren in een meer realistische setting: gegevens ophalen uit een API en het effect weergeven terwijl we wachten op een resultaat.